17-CSS伸缩布局

作者: 喝酸奶要舔盖__ | 来源:发表于2018-10-30 13:18 被阅读0次

17-CSS伸缩布局
CSS伸缩布局
移动WEB flex 布局
第10章布局样式相关-伸缩布局（Flexible Box）
day06-css3-demo
CSS3之Flexbox布局在ReactNative的应用
flexbox
伸缩布局
伸缩布局
伸缩布局

伸缩布局

如何使用伸缩布局?
只需要给元素设置 display: flex;属性
伸缩布局分类
- 伸缩容器: 给哪个元素添加了display: flex;属性
- 伸缩项: 伸缩容器中的盒子

伸缩布局主轴

只要将一个元素变为了伸缩的容器, 那么里面的伸缩项自动就会水平排版
默认会按照主轴从左向右的方向排版
flex-direction:属性就是专门用于设置主轴的方向的,
默认取值是row(从左至右)
row-reverse(从右至左)
如何修改主轴的方向
默认情况下主轴是在水平方向的, 但是只要设置了flex-direction: column;
就会将主轴修改为垂直方向

注意点:
只要主轴变为了垂直方向, 那么侧轴就会自动变为水平方向
主轴和侧轴永远都是十字交叉的,而且不论主轴的起点在下面还是在上面,侧轴的起点永远都在左边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            margin: 100px auto;
            width: 800px;
            height: 200px;
            border: 1px solid #000;
            box-sizing: border-box;
            /*将ul变为伸缩容器*/
            display: flex;
            /*
            1.只要将一个元素变为了伸缩的容器, 那么里面的伸缩项自动就会水平排版
            2.默认会按照主轴从左向右的方向排版
            flex-direction:属性就是专门用于设置主轴的方向的,
            默认取值是row(从左至右)
            row-reverse(从右至左)
            */
            /*flex-direction: row;!*相当于左浮动*!*/
            /*flex-direction: row-reverse;!*相当于右浮动*!*/

            /*
            修改了主轴的方向
            默认情况下主轴是在水平方向的, 但是只要设置了flex-direction: column;
            就会将主轴修改为垂直方向
            注意点:
            只要主轴变为了垂直方向, 那么侧轴就会自动变为水平方向
            主轴和侧轴永远都是十字交叉的
            */
            /*从上至下排版*/
            /*flex-direction: column;*/
            /*从下至上排版*/
            flex-direction: column-reverse;


        }

        ul li{
            list-style: none;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            box-sizing: border-box;
            background-color: yellow;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
        }
    </style>
</head>
<body>
<!--
    1.如何使用伸缩布局?
    只需要给元素设置 display: flex;属性

    2.给哪个元素添加了display: flex;属性谁就是伸缩容器
    3.伸缩容器中的盒子, 我们称之为伸缩项
-->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩布局主轴和侧轴

主轴对齐方式

伸缩项默认是和主轴起点对齐
设置伸缩项和主轴终点对齐
justify-content: flex-end;
设置伸缩项在伸缩容器中居中
justify-content: center;
space-between; 两端对齐, 第一个伸缩项会和主轴的起点对齐最后一个伸缩项会和主轴的终点对齐其它项目平分多余的间隙
间隙的计算公式: (伸缩容器宽度 - 所有伸缩项的宽度) / (伸缩项 - 1);
justify-content: space-between;
space-around; 环绕对齐, 给所有伸缩项的两遍都添加间隙
中间盒子两端的间隙是左右两端盒子间隙的2倍
间隙的计算公式: (伸缩容器宽度 - 所有伸缩项的宽度) / (伸缩项 * 2);
justify-content: space-around;

侧轴对齐方式

侧轴的默认对齐方式: 和侧轴的起点对齐
align-items: flex-start;
伸缩项和侧轴终点对齐
align-items: flex-end;
伸缩项在侧轴居中对齐
align-items: center;

注意点:
侧轴没有主轴的两端对齐和环绕对齐

按照所有伸缩项内容的基线对齐
align-items: baseline;

主轴和侧轴单独设置对齐方式

设置justify-self: ;属性来设置伸缩项主轴对齐方式
设置align-self: ;属性来设置伸缩项侧轴对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 800px;
            height: 800px;
            border: 1px solid #000;
            margin: 0 auto;
            display: flex;
        }
        ul>li{
            list-style: none;
            width: 200px;
            height: 200px;
            line-height: 200px;
            font-size: 50px;
            text-align: center;
            border: 1px solid #000;
            box-sizing: border-box;
            background: pink;

        }

        ul>li:nth-child(1){
            /*给侧轴单独设置对齐方式*/
            align-self: flex-end;
            justify-self: ;
        }

        ul>li:nth-child(2){
            /*给侧轴单独设置对齐方式*/
            align-self: center;
        }

        ul>li:nth-child(3){
            /*给侧轴单独设置对齐方式*/
            align-self: flex-start;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩布局换行显示

伸缩容器宽度小于所有伸缩项宽度时, 系统会自动等比缩放伸缩项
如果不想让系统自动等比缩放伸缩项, 那么可以设置一个属性
flex-wrap: wrap;来使伸缩项换行显示
默认是不换行
flex-wrap: nowrap;
设置换行属性
flex-wrap: wrap;
将行数顺序倒序
flex-wrap: wrap-reverse;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            display: flex;
            /*
            伸缩容器宽度小于所有伸缩项宽度时, 系统会自动等比缩放伸缩项
            如果不想让系统自动等比缩放伸缩项, 那么可以设置一个属性
            flex-wrap: wrap;
            */
            /*默认是不换行*/
            /*flex-wrap: nowrap;*/

            /*设置换行属性*/
            /*flex-wrap: wrap;*/

            /*将行数顺序颠倒*/
            /*flex-wrap: wrap-reverse;*/

        }
        ul>li{
            list-style: none;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            border: 1px solid #000;
            box-sizing: border-box;
            background: pink;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>

伸缩布局换行对齐方式

这种对齐方式和主轴对齐方式基本差不多,只不过实在侧轴上对齐
注意点: 设置换行后元素的对齐方式, 参考点就是侧轴
侧轴起点对齐
align-content: flex-start;
侧轴居中对齐
align-content: center;
侧轴环绕对齐
align-content: space-around;
侧轴等分对齐
align-content: space-between;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            height: 800px;
            border: 1px solid #000;
            margin: 0 auto;
            display: flex;
            /*设置换行属性*/
            flex-wrap: wrap;

            /*注意点: 设置换行后元素的对齐方式, 参考点就是侧轴*/
            /*align-content: flex-start;*/
            /*align-content: center;*/
            /*align-content: space-around;*/
            /*align-content: space-between;*/

            /*拉伸对齐就是行的默认对齐方式
              计算公式: (伸缩容器的高度 / 行数)
           */
            align-content: stretch;
        }
        ul>li{
            list-style: none;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            border: 1px solid #000;
            box-sizing: border-box;
            background: pink;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
</body>
</html>

伸缩布局排序

在伸缩布局中, 可以利用order属性来给伸缩项进行排序
默认情况下order的取值是0, 那么order会按照取值的大小来排序值小的排在前面, 值大的排在后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 800px;
            height: 800px;
            border: 1px solid #000;
            margin: 0 auto;
            display: flex;
        }
        ul>li{
            list-style: none;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            border: 1px solid #000;
            box-sizing: border-box;
            background: pink;
        }
        /*在伸缩布局中, 可以利用order属性来给伸缩项进行排序
        默认情况下order的取值是0, 那么order会按照取值的大小来排序
        值小的排在前面, 值大的排在后面
       */
        ul>li:nth-child(1){
            order: 3;
        }

        ul>li:nth-child(2){
            order: 2;
        }

        ul>li:nth-child(3){
            order: 1;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩项方法比例

如果想让伸缩项按照一定的比例分配伸缩容器的宽度, 那么就可以通过
flex-grow属性来设置
flex-grow: 1; 那么就代表着所有伸缩项占用一份宽度

计算公式:
首先:会计算多余的宽度: 伸缩容器的宽度 - 所有伸缩项的宽度 = 多余宽度
多余的宽度 = 800 - 600 = 200
其次:会计算每份分配多大的宽度: 多余宽度 / flex-grow 值的总和200 / 6 = 33;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 800px;
            height: 800px;
            border: 1px solid #000;
            margin: 0 auto;
            display: flex;
        }
        ul>li{
            list-style: none;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            border: 1px solid #000;
            box-sizing: border-box;
            background: pink;
        }

        /*
            1.如果想让伸缩项按照一定的比例分配伸缩容器的宽度, 那么就可以通过
            flex-grow属性来设置

            2.flex-grow: 1; 那么就代表着所有伸缩项占用一份宽度

            3.计算公式:
            首先:会计算多余的宽度:   伸缩容器的宽度 - 所有伸缩项的宽度 = 多余宽度
            多余的宽度 = 800 - 600 = 200

            其次:会计算每份分配多大的宽度:   多余宽度 / flex-grow 值的总和
            200 / 6 = 33;

            200+33 = 233;
            200+66 = 266;
            200+99 = 299;
            */
        ul>li:nth-child(1){
            flex-grow: 1;
        }

        ul>li:nth-child(2){
            flex-grow: 2;
        }

        ul>li:nth-child(3){
            flex-grow: 4;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩项缩小比例

如果伸缩容器的宽度小于伸缩项的宽度, 我们可以通过flex-shrink来设置每个伸缩项的缩小比例

计算公式:
首先:会计算溢出的宽度: 伸缩容器的宽度 - 所有伸缩项的宽度 = 多余宽度
多余的宽度 = 400 - 600 = -200
其次: 会计算权重
用当前元素flex-shrink:设置的值 * 各个元素的宽度 +
1 * 200 + 2 * 200 + 3 * 200 = 1200
第一个元素第而个元素第三个元素
最后: 计算收缩的空间
算溢出的宽度 * 当前元素flex-shrink:设置的值 * 当前元素的宽度 / 总权重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            height: 800px;
            border: 1px solid #000;
            margin: 0 auto;
            display: flex;
        }
        ul>li{
            list-style: none;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            border: 1px solid #000;
            box-sizing: border-box;
            background: pink;
            /*
            如果伸缩容器的宽度小于伸缩项的宽度, 我们可以通过flex-shrink来设置每个伸缩项的缩小比例

            计算公式:
            首先:会计算溢出的宽度:   伸缩容器的宽度 - 所有伸缩项的宽度 = 多余宽度
            多余的宽度 = 400 - 600 = -200

            其次: 会计算权重
            用当前元素flex-shrink:设置的值  * 各个元素的宽度 +
            1 * 200   +   2 * 200    +    3 * 200 = 1200
            第一个元素    第而个元素    第三个元素

            最后: 计算收缩的空间
            算溢出的宽度 * 当前元素flex-shrink:设置的值 * 当前元素的宽度 / 总权重
            -200 * 1 * 200 / 1200 = -26;  --> 200 - 26
            -200 * 2 * 200 / 1200 =
            */

        }
        ul>li:nth-child(1){
            flex-shrink: 1;
        }
        ul>li:nth-child(2){
            flex-shrink:2;
        }
        ul>li:nth-child(3){
            flex-shrink:3;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩项宽度设置

我们可以通过flex-basis属性来设置伸缩项的宽度

注意点:
1.在伸缩布局中, 如果同时通过width和flex-basis给伸缩项设置宽度
那么会听flex-basis, width属性会失效
2.如果flex-basis是auto,那么就会听width属性

17-CSS伸缩布局
伸缩布局如何使用伸缩布局?只需要给元素设置 display: flex;属性伸缩布局分类伸缩容器: 给哪个元素...
CSS伸缩布局
伸缩布局(弹性布局) display:flex 给谁添加了display:flex,谁就是伸缩容器伸缩容器中的盒...
移动WEB flex 布局
一、简介又名伸缩布局、弹性布局、伸缩盒布局、更适用于移动端布局原理，添加display: flex; 父盒设...
第10章布局样式相关-伸缩布局（Flexible Box）
伸缩布局（一） CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box）...
day06-css3-demo
伸缩布局demo：
CSS3之Flexbox布局在ReactNative的应用
CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局，被成为弹性布局（或者伸缩布局）。相比...
flexbox
flexbox flexbox布局是伸缩容器（container）和伸缩项目组成（item）布局的主题思想是元素可...
伸缩布局
flex Container 伸缩容器（外层div） main axis 主轴，横向的轴，x轴，起点和终点之间的距...
伸缩布局
display: flex （父盒子设置为弹性布局） flex-direction: column (调整主轴方向...
伸缩布局
直接参考： http://www.ruanyifeng.com/blog/2015/07/flex-grammar...