flex 布局 | yinol

css

发布日期: 2021-04-06

Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
flex布局则是一种新的布局方案，通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式

指定容器为flex 布局

.box{
    display: flex;
    display: -webkit-flex; /* Safari */
}

行内元素使用flex布局

.box{
    display: inline-flex;
    display: -webkit-inline-flex; /* Safari */
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

flex 基本概念

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

容器属性(父级容器及设置为flex的容器)

flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。
取值：row(默认) | row-reverse | column | column-reverse

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap 属性

用于控制项目是否换行, 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
取值：nowrap(默认) | wrap | wrap-reverse

nowrap（默认）表示不换行：
当项目总宽度超过父容器的宽度，项目会强行等分容器宽度从而不换行，项目的大小就不是自己设置的大小。

wrap表示换行：
wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。

wrap-reverse表示换行：
需要注意的是第一排会紧贴容器底部，效果与wrap相反。

flex-flow 属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个

justify-content 属性

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

flex-start（默认值）：左对齐

flex-end ：右对齐

center ：居中

space-between ：两端对齐，项目之间的间隔都相等

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

align-items 属性

用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器
取值：flex-start | flex-end | center | baseline | stretch(默认)

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

flex-start ：交叉轴的起点对齐

flex-end ：交叉轴的终点对齐

center ：交叉轴的中点对齐

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

stretch ：如果项目未设置高度或设为auto，将占满整个容器的高度

align-content 属性

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

stretch ：如果项目未设置高度或设为auto，将占满整个容器的高度

flex-start ：与与交叉轴的起点对齐,align-items属性表现一致

flex-end ：与交叉轴的终点对齐,与align-items属性表现一致

center ：与交叉轴的中点对齐,与align-items属性表现一致

space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布,与justify-content保持一致

space-around ：每根轴线两侧的间隔都相等,与justify-content保持一致

项目属性(父元素下面的子元素)

order

取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

    <div className={style.box}>
      <div className={style.flexItem} style={{order:1}}>1</div>
      <div className={style.flexItem} style={{order:2}}>2</div>
      <div className={style.flexItem} style={{order:1}}>3</div>
    </div>

flex-grow

取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

   <div className={style.box}>
     <div className={style.flexItem}>1</div>
     <div className={style.flexItem}>2</div>
     <div className={style.flexItem} style={{flexGrow:1}}>3</div>
   </div>

flex-shrink

取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

    <div className={style.box} style={{width:'8rem'}}>
        <div className={style.flexItem} style={{width:'4rem'}} >1</div>
        <div className={style.flexItem} style={{width:'4rem'}}>2</div>
        <div className={style.flexItem} style={{width:'4rem'}}>3</div>
    </div>

flex-basis

取值：auto（默认），用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重比width属性高，会覆盖widtn属性

    <div className={style.box} style={{width:'16rem'}}>
      <div className={style.flexItem} style={{width:'4rem'}} >1</div>
      <div className={style.flexItem} style={{width:'4rem'}}>2</div>
      <div className={style.flexItem} style={{width:'4rem',flexBasis:'6rem'}}>3</div>
    </div>

注：flex-basis属性，后设置了width属性，但宽度依旧以flex-basis属性为准

flex

取值：0 1 auto（默认），flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

align-self

    <div className={style.box} style={{width:'16rem'}}>
      <div className={style.flexItem} style={{width:'4rem'}} >1</div>
      <div className={style.flexItem} style={{width:'4rem'}}>2</div>
      <div className={style.flexItem} style={{width:'4rem',alignSelf:'flex-end'}}>3</div>
    </div>