CSS布局--flex

flex

容器存在两根轴：水平主轴，垂直交叉轴。

容器属性

flex-direction

决定主轴的方向，即项目的排列顺序。flex-direction:row|row-reverse|column|column-reverse

flex-wrap

一条轴线放不下时，如何换行。flex-wrap:nowrap|wrap|wrap-reverse

• nowrap 默认不换行。一条轴线放不下时，自动压缩成一行显示。

• wrap 换行。第一行在上方

• wrap-reverse 换行。第一行在下方
  

flex-flow

flex-flow 为 flex-direction flex-wrap的简写形式，默认值为flex-flow:row nowrap

justify-content

定义项目在主轴上的对齐方式

• flex-start 左对齐

• flex-end 右对齐

• center 居中
  

• space-between 两端对齐
  

• space-around 每个项目两侧的间隔相等

• [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BcvTNZkR-1651840775622)(Z:\FrontEndStudy\front-end-study\README\CSS\IMG\space-around.png)]

• space-evenly 每个项目两侧的间隔相等

align-items

定义项目在交叉轴上的对齐方式

• flex-start

• flex-end

• center
  

• baseline：项目的第一行文字的基线对齐
  

• stretch：若项目未设置高度或设为auto，会占满整个容器
  

align-content

定义多根轴线的对齐方式，若项目只有一根轴线，该属性不起作用

• flex-start
  

• flex-end
  

• center

• space-between

• space-around

  

• stretch

  

项目属性

order

定义项目的排列顺序，数值越小，排列越靠前，默认为0

（下图设置为7的order为1，4的order为2，9的order为3，5的order为4，其他为5）

flex-grow

定义项目的放大比例，默认为0。根据设置的值，按比例瓜分剩余空间

flex-shrink

定义项目的缩小比例，默认为1，即若空间不足，项目将缩小。若某个项目设置为0，其余为1，当空间不足时，前者不缩小。负值无效

flex-basis

定义项目在分配多余空间之前占据的主轴空间，即项目的本来大小

flex

是flex-grow flex-shrink flex-basis的简写，默认为0 1 auto，后两个属性可选

• flex:auto 即flex-grow:1 flex-shrink:1 flex-basis:auto
• flex:none 即 flex-grow:0 flex-shrink:0 flex-basis:auto

align-self

定义单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认为auto，表示继承align-items属性，若没有父元素，等同于stretch

• flex-start
• flex-end
• center
• baseline
• stretch

双栏布局

左边固定，右边自适应

<style>
    .container {
        display: flex;
    }
    
    .item:nth-child(1) {
        background-color: aqua;
        width: 200px;
    }
    
    .item:nth-child(2) {
        background-color: tomato;
        flex: 1;
    }

三栏布局

左右两端固定，中间自适应

<style>
    .container {
        display: flex;
    }
    
    .item:nth-child(1) {
        flex-basis: 100px;
        background-color: yellow;
    }
    
    .item:nth-child(2) {
        flex: 1;
        background-color: turquoise
    }
    
    .item:nth-child(3) {
        flex-basis: 200px;
        background-color: tomato
    }
</style>

水平垂直居中

<style>
    .container {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        border: 1px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .item {
        background-color: green;
        margin: 2px;
        padding: 20px;
    }
</style>