CSS--布局--伸缩盒布局

米卡小米

已于 2022-03-01 17:40:16 修改

阅读量832

点赞数

分类专栏： CSS 文章标签： css css3 前端

于 2021-11-01 11:06:36 首次发布

原文链接：https://www.cnblogs.com/fxycm/p/4649648.html

版权

CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

容器使用弹性盒布局的父元素 display:flex;

本质：给父盒子添加flex属性，来控制子盒子的位置和排列方式。

主轴：Flex容器的主轴主要用来配置Flex项目。他不一定是水平的，这主要取决于fle-direction属性。
　　侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。

一、Flex父容器属性

1.display

要改变元素的模式为伸缩容器，需要使用display属性。

display:flex | inline-flex

flex:设置为块级伸缩容器。
inline-flex:设置为内联级伸缩容器。

<!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;
        }
        div>div{
            width:100px;
            height:100px;
            line-height:100px;
            border:1px solid;
            text-align:center;
            margin:10px;
        }
        #box{
            display:flex;     
            border:1px solid;
            margin:20px;
        }
        #inline{            
            display:inline-flex;
            border:1px solid;
            margin:20px;
        }
    </style>
    </head>
    <body>
    <div id="box">
        <div>A</div><div>B</div><div>C</div><div>D</div>
    </div>
    <div id="inline">
        <div>A</div><div>B</div><div>c</div><div>D</div>
    </div>
    </body>
    </html>

块级伸缩容器与内联级伸缩容器类似，默认都是从左往右排列，唯一不同的是块级伸缩容器独占一行，而内联级伸缩容器随着内容改变。
　　Flex容器不是块容器，因此有些设计用来控制块布局的属性在伸缩布局中不适用。浮动无法影响伸缩容器，而且伸缩容器的margin与其内容的margin不会重叠。如果内联伸缩容器设置了浮动，元素将会以块级伸缩容器显示。

2.flex-direction（设置主轴方向）

定义Flex项目在Flex容器中放置的方向。

flex-direction:row | row-reverse | column | column-reverse

row: （默认值）Flex项目从左向右排列。
row-reverse: Flex项目从右向左排列。
column:和row类似，方向从上到下排列。
column-reverse:和row-reverse类似，方向从下到上排列。

<!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;
        }
        div>div{
            width:100px;
            height:100px;
            line-height:100px;
            border:1px solid;
            text-align:center;
            margin:10px;
        }
        .box{
            display:-moz-box;
            display:-webkit-box;
            display:-ms-flexbox;
            display:-webkit-flexbox;
            display:flex;
            border:1px solid;
            margin:20px;
        }
        .box1{                        
            /*定义Flex项目在Flex容器中放置的方向,从左往右。*/
            flex-direction:row;           
        }
        .box2{     
            /*定义Flex项目在Flex容器中放置的方向，从右往左。*/
            flex-direction:row-reverse;                      
        }        
        .box3{            
           /*定义Flex项目在Flex容器中放置的方向，从上往下。*/
            flex-direction:column;   
        }
        .box4{            
            /*定义Flex项目在Flex容器中放置的方向，从下往上。*/
            flex-direction:column-reverse;   
        }
    </style>
    </head>
    <body>
    <div class="box box1">
        <div>A</div><div>B</div><div>C</div><div>D</div>
    </div>
    <div class="box box2">
        <div>A</div><div>B</div><div>C</div><div>D</div>
    </div>
    <div class="box box3">
        <div>A</div><div>B</div><div>C</div><div>D</div>
    </div>
    <div class="box box4">
        <div>A</div><div>B</div><div>C</div><div>D</div>
    </div>        
    </body>
    </html>

默认值flex-direction等于row时，Flex项目从左往右排列。

flex-direction等于row-reverse时，Flex项目从右往左排列。

flex-direction等于column时，Flex项目从上往下排列。

flex-direction等于column-reverse时，Flex项目从下往上排列。

3. flex-wrap（换行）

　默认情况下，Flex项目都尽可能在一行显示，你可以根据flex-wrap的属性值来改变，让Flex项目多行显示。

flex-wrap:nowrap | wrap | wrap-reverse

nowrap: 默认值，单行显示
　　wrap: 多行显示

<!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;
        }
        .box{
        display:flex;
        border:1px solid;
        margin:20px;
        /*定义伸缩换行属性为nowrap(默认值)*/
        flex-wrap:nowrap;
    }
    .box div{
        width:100px;
        height:100px;
        line-height:100px;
        border:1px solid;
        text-align:center;
        margin:10px;
    }
   
</style>
</head>
<body>
<div class="box">
    <div>A</div>    <div>B</div>    <div>C</div>    <div>D</div>
    <div>E</div>    <div>F</div>    <div>G</div>    <div>H</div>
    <div>I</div>    <div>J</div>    <div>K</div>     <div>L</div>
</div>    
</body>
</html>

因为默认值nowrap不准换行，伸缩容器容纳不下伸缩项目时，各伸缩项目会根据默认的收缩比例进行缩小以适应伸缩容器的宽度。

.box{
   ...
   flex-wrap:wrap;
}

flex-wrap等于wrap时，伸缩容器容不下伸缩项目时自动换行了。

.box{
   ...
   flex-wrap:wrap-reverse;
}

flex-wrap等于wrap-reverse时，伸缩容器容不下伸缩项目时换行了。不同的是换行的方向相反。

4.flex-flow（属性联写）

这是flex-direction和flex-wrap两个属性的缩写,默认值是row nowrap。

flex-flow:flex-direction || flex-wrap

5. justify-content （主轴上子元素排列）

控制伸缩盒子在主轴上的对齐方式

取值：

flex-start 【默认值】在主轴的开始显示。

flex-end 在主轴的结束显示。

center 在主轴的中心显示。

space-around 填充空白自适应在主轴中心显示。

space-between 填充空白自适应在主轴中心显示，但是首尾两个元素距离容器没有空白。

6.align-items（控制伸缩盒子在侧轴的对齐方式）（单行）

取值：

flex-start 在伸缩盒子容器的伸缩开始位置显示，即伸缩盒子容器顶部

flex-end 在伸缩盒子容器的伸缩结束位置显示，即伸缩盒子容器底部

stretch 【默认值】将盒子在侧轴上进行拉伸，直至适应整个伸缩盒子容器

center 盒子在侧

轴中心显示

7.align-content（多轴排列在侧轴对齐方式）（多行）

取值： flex-start flex-end center stretch 【默认，子项高度平分父元素高度】

space-around（平均分侧轴） space-between（上边贴上，下边贴下）

二、flex子项属性

1.flex属性(定义子项分配剩余空间，用flex表份数)

section {

display: flex;

}

article {

flex: 1;

}

article:nth-of-type(3) {

flex: 2;

}

父元素 section 为一个伸缩盒子容器， article 各占一份，第三个 article 占 2 份，假如共有 3个 article ，第一个、第二个 article 占 1/4 ，第三个占 1/2 。

2.align-self（子项在侧轴排列方式）

3.order（子项排列顺序）

米卡小米

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS--布局--伸缩盒布局

CSS3 弹性盒（Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。容器使用弹性盒布局的父元素 display:flex; 主轴：Flex容器的主轴主要用来配置Flex项目。他不一定是水平的，这主要取决于fle-directio...
复制链接

扫一扫