欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

flex布局之justify-content

程序员文章站 2022-03-15 15:14:07
...

版权声明:本文为博主原创文章,未经博主允许不得转载。
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;
 }

效果分别如下:
flex布局之justify-content
flex布局之justify-content
flex布局之justify-content
flex布局之justify-content