十四天 flex布局

十四css.png

flex 布局

flex 布局的出现

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。

flex布局的兼容性问题

浏览器.png
注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

flex 布局的定义

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局

flex 布局有两个值：

display:flex; 代表的是块级，元素上下排列
display:inline-flex; 代表的是行内块，元素左右排列

flex 布局的基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

水平的主轴:main axis
垂直的交叉轴:cross axis
主轴的开始位置（与边框的交叉点）:main start
结束位置:main end
交叉轴的开始位置:cross start
结束位置:cross end

容器的属性

1.flex-direction属性

设置主轴的方向

主轴方向.png

row：主轴的方向是水平，从从左到右
column：主轴的方向是垂直的，从上到下
row-reverse：主轴的方向是水平，从右到左
column-reverse：主轴的方向是垂直的，从下到上

2.flex-wrap属性

wrap: 换行

nowrap: 不换行（默认）
wrap-reverse：换行，不过第一行在最下面

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
flex-flow:row wrap;

3.justify-content属性

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

对齐方式.png

flex-start：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐
space-around：项目两侧的间隔相等
space-evenly:项目平均分配

4.align-items属性

定义项目在交叉轴上如何对齐
对齐方式2.png

flex-start：元素位于flex容器的开头
flex-end：元素位于flex容器的末端
center：居中
baseline：元素位于弹性容器的基线
stretch：将元素拉伸以适合伸缩容器，如果项目未设置高度或设为auto，将占满整个容器的高度

5.align-content属性

换行.png
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。（也就是说得有项目换行）

flex-start：元素位于flex容器的开头
flex-end：元素位于flex容器的末端
center：居中
baseline：元素位于弹性容器的基线
stretch：将元素拉伸以适合伸缩容器，如果项目未设置高度或设为auto，将占满整个容器的高度

项目的属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

1 order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0
顺序.png

2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

.item {
flex-grow: <number>; /* default 0 */
}
复制代码

比例.png

3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
负值对该属性无效

缩小.png

4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

.item {
flex-basis: <length> | auto; /* default auto */
}
复制代码

5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

flex：0 1 auto；默认值
flex：none；代表的意思等同于 flex：0 0 auto；
flex：auto；代表的意思是flex：1 1 auto；
flex：number；当flex取值为一个非负数字，则该数字为flex-grow的值，flex-shrink的值为1，flex-basis的值为0%；

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
复制代码

6 align-self属性

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

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
复制代码

单个对齐方式.png

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .main{
            height: 140px;
            border-bottom:1px solid red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .md{
            width: 1080px;
            padding:0 20px;
            box-sizing: border-box;
            background:pink;
            height: 50px;
        }
        .links{
            display: flex;
        }
        .links>.item{
            flex:1;
            display: flex;
            align-items:center ;
        }
        .links>.item .icon{
            width: 50px;
            height: 50px;
            background:url("icon-wechat.png") center center no-repeat;
            background-size:contain;
        }
        .links>.item2{
           justify-content: center;
        }
        .links>.item3{
           justify-content: flex-end;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="md links">
            <div class="item">
                <div class="icon"></div>
                <div class="text">
                    <p>微信小程序</p>
                    <p>微信扫一扫，直接用车</p>
                </div>
            </div>
            <div class="item item2">
                <div class="icon"></div>
                <div class="text">
                    <p>微信小程序</p>
                    <p>微信扫一扫，直接用车</p>
                </div>
            </div>
            <div class="item item3">
                <div class="icon"></div>
                <div class="text">
                    <p>微信小程序</p>
                    <p>微信扫一扫，直接用车</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端