web基础学习（十三）CSS3弹性盒模型布局

上一节：CSS3之动画过渡实用案例——————下一节：CSS3多列布局

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

一、弹性容器(flex container也就是父级元素)

父级元素共有6个属性下面详细对这几个属性分析布局讲解

flex-direction

设置主轴方向，确定弹性子元素排列方式
flex-direction：row | row-reverse | column | column-reverse
flex-wrap

设置弹性子元素超出弹性容器范围时是否换行
flex-wrap：nowrap | wrap | wrap-reverse
flex-flow

复合属性(flex-direction和flex-wrap)，设置弹性子元素排列方式
flex-flow：[ flex-direction ] || [ flex-wrap ]
justify-content

设置弹性子元素主轴上的对齐方式
justify-content：flex-start | flex-end | center | space-between | space-around
align-items

设置弹性子元素侧轴上的对齐方式
align-items：flex-start | flex-end | center | baseline | stretch
align-content

侧轴有空白且有多行时，设置弹性子元素侧轴上的对齐方式
align-content：flex-start | flex-end | center | space-between | space-around | stretch

二、弹性子元素(flex item)

web基础学习（十三）CSS3弹性盒模型布局

子元素也有6个属性下面是布局详解

order

设置弹性子元素的顺序，数值小的排在前面，可以为负值默认值为0。
order：<integer>
flex-grow

设置弹性子元素的扩展比率，不允许为负值，默认值为0,根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
flex-grow：<number>
flex-shrink
>设置弹性子元素的收缩比率，不允许为负值，默认值为1,根据弹性盒子元素所设置的扩展因子作为比率来收缩空间
>flex-shrink：<number>
flex-basis

设置弹性子元素的伸缩基准值(参照值)，不允许为负值。 默认值为auto，无特定宽度(高度)
flex-basis：<length> | <percentage> | auto
flex

复合属性，设置弹性子元素的空间如何分配
flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
align-self

设置弹性子元素的在侧轴上的对齐方式，与align-item的相同。设置某个弹性子元素的独立对齐方式。
align-self：auto | flex-start | flex-end | center | baseline | stretch

弹性盒模型重在理解,自己练习后很容易理解里面的含义。
拷贝demo测试练习吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FLEX</title>
    <style>
        .flex-container {
            /*开启弹性盒子*/
            display: flex;
            /*设置主轴水平方向*/
            flex-direction: row;
            /*设置超出范围允许换行*/
            flex-wrap: wrap;
            /*复合方式写主轴水平方向和换行*/
            flex-flow: row wrap;
            /*设置主轴居中对齐*/
            justify-content: center;
            /*设置子元素侧轴居中对齐*/
            align-items: center;
            width: 1200px;
            height: 640px;
            background-color: lightsteelblue;
        }

        .flex-container .flex-item {
            width: 320px;
            height: 240px;
            margin: 10px;
            font-size: 50px;
            font-weight: bolder;
            line-height: 240px;
            color: red;
            text-align: center;
            background-color: lightsalmon;
        }
        /*使用order设置每个子元素的顺序*/
        .flex-container .one{
            order: 1;
            /*设置扩展比率2 */
            flex-grow:2;
        }
        .flex-container .two{
            order: 3;
            /*设置扩展比率1 */
            flex-grow:1;
        }
        .flex-container .three{
            order: 4;
            /*设置扩展比率3 */
            flex-grow:3;
        }
        .flex-container .four{
            order: 2;
            
        }
        .flex-container .five{
            order: 5;
        }
        .flex-container .six{
            order: 0;
        }
    </style>
</head>
<body>
<div class="flex-container">
    <div class="flex-item one">1</div>
    <div class="flex-item two">2</div>
    <div class="flex-item three">3</div>
    <div class="flex-item four">4</div>
    <div class="flex-item five">5</div>
    <div class="flex-item six">6</div>
</div>
</body>
</html>

web基础学习（十三）CSS3弹性盒模型布局

一、弹性容器(flex container也就是父级元素)

二、弹性子元素(flex item)

相关推荐