css 3カラムボックス

Posted 2021-05-13

.column {
    width:1000px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    @include display-flex;
}

.column__column-list {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #ccc;
    @include box-sizing(border-box);
    &:nth-child(2) {
        margin: 0 10px;
    }
}

  <section class="column">
    <div class="column__column-list">
    <img src="https://placehold.jp/250x250.png">
    <!--/.column__column_list--></div>

    <div class="column__column-list">
    <img src="https://placehold.jp/250x250.png">
    <!--/.column__column_list--></div>

    <div class="column__column-list">
    <img src="https://placehold.jp/250x250.png">
    <!--/.columnBox__column--></div>
<!--/.column--></section>

.column {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    display: -webkit-flex;
    display: flex;
}
.column__column-list {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #ccc;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.column__column-list:nth-child(2) {
    margin: 0 10px;
}