flex布局之justify-content

版权声明：本文为博主原创文章，未经博主允许不得转载。
justify-content有五个值，分别是：flex-start,flex-end,center,space-around,space-between

<div class="flex-start">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="flex-end">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="center">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="space-around">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="space-between">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>

css为：

.flex-start {
     display: flex;
     justify-content: flex-start;
 }
 .flex-start div {
     width: 200px;
     height: 200px;
     background: pink;
     margin: 10px;
 }
 .flex-end {
     display: flex;
     justify-content: flex-end;
 }
 .flex-end div {
     width: 200px;
     height: 200px;
     background: pink;
     margin: 10px;
 }
 .center {
     display: flex;
     justify-content: center;
 }
 .center div {
     width: 200px;
     height: 200px;
     background: pink;
     margin: 10px;
 }
 .space-around {
     display: flex;
     justify-content: space-around;
 }
 .space-around div {
     width: 200px;
     height: 200px;
     background: pink;
     margin: 10px;
 }
 .space-between {
     display: flex;
     justify-content: space-between;
 }
 .space-between div {
     width: 200px;
     height: 200px;
     background: pink;
     margin: 10px;
 }

效果分别如下：