flex弹性布局

特点:操作方便,布局极为简单,布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

flex 布局原理

flex 是 flexible Box的缩写,意为弹性布局,用来为盒装模型特供最大的灵活性,任何一个容器又可以指定为flex布局。

  • 父元素设为 flex 布局以后,子元素的floatclearvertical-align属性将失效。
  • 采用flex布局的元素,成为flex容器(flex container) ,简称 "容器"。他的所有子元素自动成为容器成员,成为flex项目 (flex item ),简称项目
  • 采用flex布局行内元素直接可以设置高度和宽度,无需元素转换。

我们flex布局其实就是给父元素添加flex属性,控制子元素的位置和排序方式。

flex父项常见属性

  • flex-direction :设置主轴的方向
  • justify-content: 设置 主轴上子元素的排列方式
  • flex-wrap : 设置 子元素是否换行
  • align-content: 设置侧轴上的子元素的排序方式(多行)
  • align-items: 设置侧轴上的子元素的排序方式(单行)
  • flex-flow: 复合属性,相当于同时设置了flex-direction 和flex-wrap

flex-direction

啥主轴,侧轴?其实在我们弹性布局中,分成主轴和侧轴,同样的叫法还有,行 和列,x和y轴

默认的主轴方向是 x轴方向,水平向右,侧轴方向y轴,垂直向下

image-20210203090155890

主轴侧轴是可以设置的,flex-direction 设置谁为主轴,剩下的就是侧轴。而我们的子元素就是跟着主轴来排列的。

描述
row默认值。水平从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上
<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

我们可以感受一下row-reverse 效果

        div {
            display:flex;
            width: 800px;
            height: 300px;
            flex-direction:row-reverse;
            background-color: purple;
        }
        div span {
            width: 150px;
            height: 200px;
            background-color: pink;
            border: black solid 1px;
        }
image-20210203091330748

采用flex布局行内元素直接可以设置高度和宽度,无需元素转换。

如果flex-direction:column; 竖直方向排列,我们会发现大盒子装不下的,但是会这样码?

image-20210203091942722

我们会发现装不下,项目会自动适应的——按照我们设定数据的等比例缩

justify-content

设置 主轴上子元素的排列方式

排列方式描述
flex-start默认值。从头部开始排列
flex-end从尾部开始排列
center在主轴上上居中对齐。
space-between先两边贴边,平分剩余的空间作为间距
space-around在平分剩下空间,作为间距

flex-end

image-20210203093217017

原来的居中对齐很麻烦,但是现在就不一样了

        div {
            display:flex;
            width: 800px;
            height: 300px;
            justify-content: center;
            background-color: purple;
        }

就可以简单的实现了。


space-around :在平分剩下空间,作为间距

image-20210203093757863
**space-between**:先两边贴边,平分剩余的空间作为间距 image-20210203094015961

flex-wrap

设置 子元素是否换行, nowrap 不换行,wrap换行

flex默认值是nowrap的,也就是即使一行装不下了都不会换行,而是项目会自动适应的—— 按照我们设定数据的等比例缩放。

align-items

那么如何控制侧轴的排布呢?align-items就是来干这个的。

align-items: 设置侧轴上的子元素的排序方式,适合只有一行情况

排列方式描述
flex-start从头部开始排列
flex-end从尾部开始排列
center在主轴上上居中对齐。
stretch默认值。元素被拉伸以适应容器。

这个和前面的布局一样,只不过还多一个了stretch

如何实现子元素垂直水平都居中呢?

            justify-content: center;
            align-items: center;

**stretch:**各行将会伸展以占用剩余的空间。如果主轴是x轴,那么如果不设置高度的话,就会被拉伸,占掉父元素的剩余空间。

align-content

align-content: 设置侧轴上的子元素的排序方式,适合子项换行的情况(多行的情况)

排列方式描述
flex-start默认值。从头部开始排列
flex-end从尾部开始排列
center在主轴上上居中对齐。
space-between先两边贴边,平分剩余的空间作为间距
space-around在平分剩下空间,作为间距
stretch默认值。元素被拉伸以适应容器。

效果和前面大同小异,不在赘述。

align-items 在多行下无效,align-content 在单行下无效。

一句话,单行找align-items ,多行找,align-content

flex-flow

flex-flow: 复合属性,相当于同时设置了flex-direction 和flex-wrap

其实就是他们两个的简写,例如:flex-direction: row-reverse;flex-wrap: nowrap; 等于

flex-flow: row-reverse nowrap;

子项常见属性

假如前面大盒子的属性来控制子盒子的属性像是在吃大锅饭,那么子盒子的属性就是给自己开小灶。

  • flex 定义子项占剩余空间的 权重,
  • align-self 控制子项自己的在侧轴的排序方式
  • order 定义子项的排列顺序

flex

.item {
    flex:<number> ; /*默认为0*/
}
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
        section {
            display: flex;
            width: 1000px;
            height: 150px;
            background-color: pink;
            margin:0 auto;
        }
        section div:nth-child(1){
            width: 100px;
            height: 100px;
            flex: 2;
            background-color: red;
        }
        section div:nth-child(3){
            width: 100px;
            height: 100px;
            flex: 2;
            background-color: blue;
        }
        section div:nth-child(2){
            height: 100px;
            flex: 2;
            background-color: purple;
        }

我在这里把他们的权重都设置成2, 那么他们应该等分才对,事实的确如此。

如果我把第二个盒子的权重改成1 那么它应该占 1/5的宽度,也就是200px。

image-20210203184136594

align-self

align-self 控制子项自己的在侧轴的排序方式,参数和前面的一样

排列方式描述
flex-start默认值。从头部开始排列
flex-end从尾部开始排列
center在主轴上上居中对齐。
space-between先两边贴边,平分剩余的空间作为间距
space-around在平分剩下空间,作为间距
stretch默认值。元素被拉伸以适应容器。

order

order定义子项的排列顺序

.item {
    order:<number> ; /*默认为0*/
}

数值越小越靠前,和z-index 不一样。

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2021/02/03/css-flex
最后更新于:  92  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟