全回顾扫盲css之flex布局一

flex属性一览

容器的属性
flex-direction  // 主轴的方向(即项目的排列方向)  row | row-reverse | column | column-reverse
flex-wrap       // 如果一条轴线排不下,如何换行。  nowrap | wrap | wrap-reverse
flex-flow       // flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
justify-content // 在主轴上的对齐方式   flex-start | flex-end | center | space-between | space-around
align-items     // 属性定义项目在交叉轴上如何对齐  flex-start | flex-end | center | baseline | stretch
align-content   // 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。 flex-start | flex-end | center | space-between | space-around | stretch

项目的属性
order          // 属性定义项目的排列顺序。数值越小,排列越靠前,默认为0
flex-grow      // 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍
flex-shrink    // 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小
flex-basis     // 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小
flex           // flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
align-self     // 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

flex-direction:
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。

flex-wrap:
nowrap(默认):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。

justify-content:
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

align-items:
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

align-content:
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。

各种栗子各种测

flex-direction属性


<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        border: 1px solid #333;
        margin-top:20px;
    }
    .box div{
        height:50px;
    }
    .div1{
        background: red;
    }
    .div2{
        background: blue;
    }
    .div3{
        background: pink;
    }
    .container1{
        display: flex;
        flex-direction: row;
    }
    .container2{
        display: flex;
        flex-direction: row-reverse;
    }
    .container3 {
        display: flex;
        flex-direction: column-reverse;
    }

</style>
<section class="box">
    <article class="container1">
        <div class="div1">aaaaaa</div>
        <div class="div2">bbbbbb</div>
        <div class="div3">cccccc</div>
    </article>
</section>
<section class="box">
    <article class="container2">
        <div class="div1">aaaaaa</div>
        <div class="div2">bbbbbb</div>
        <div class="div3">cccccc</div>
    </article>
</section>
<section class="box">
    <article class="container3">
        <div class="div1">aaaaaa</div>
        <div class="div2">bbbbbb</div>
        <div class="div3">cccccc</div>
    </article>
</section>

flex-wrap:默认的是nowrap,也就是不回行。所以虽然我给每个item都添加了宽度,一旦整体宽度不够的时候,每个item的宽度都随之缩小了

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        border: 1px solid #333;
        margin-top:20px;
    }
    .box div:nth-of-type(1){
        background: red;
    }
    .box div:nth-of-type(2){
        background: #c5ff14;
    }
    .box div:nth-of-type(3){
        background: #4288ff;
    }
    .box div:nth-of-type(4){
        background: #ff68cc;
    }
    .box div:nth-of-type(5){
        background: #ffff3e;
    }
    .box div:nth-of-type(6){
        background: #29ccff;
    }
    .box div:nth-of-type(7){
        background: #40ff10;
    }
    .container1{
        display: flex;
    }
    .container2{
        display: flex;
        flex-wrap: wrap;
    }
    .container3{
        display: flex;
        flex-wrap: wrap-reverse;

    }
    .box div{
        height:50px;
        width:200px;
    }
</style>
<section class="box">
    <article class="container1">
        <div class="div">aaa</div>
        <div class="div">bbb</div>
        <div class="div">ccc</div>
        <div class="div">eee</div>
        <div class="div">fff</div>
        <div class="div">ggg</div>
        <div class="div">ooo</div>
    </article>
</section>
<section class="box">
    <article class="container2">
        <div class="div">aaa</div>
        <div class="div">bbb</div>
        <div class="div">ccc</div>
        <div class="div">eee</div>
        <div class="div">fff</div>
        <div class="div">ggg</div>
        <div class="div">ooo</div>
    </article>
</section>
<section class="box">
    <article class="container3">
        <div class="div">aaa</div>
        <div class="div">bbb</div>
        <div class="div">ccc</div>
        <div class="div">eee</div>
        <div class="div">fff</div>
        <div class="div">ggg</div>
        <div class="div">ooo</div>
    </article>
</section>

justify-content和align-items

    article{
        display: flex;
        height:100px;
    }
    .box div{
        height:50px;
        width:200px;
    }
    .container2{
        display: flex;
        justify-content: space-around;
    }
    .container3{
        display: flex;
        justify-content: center;
    }
    .container3{
        display: flex;
        justify-content: space-between;
    }
    .container4{
        display: flex;
        align-items: center;
    }
    .container5{
        display: flex;
        align-items: baseline;
    }

随机浏览