CSS3 Flex布局

最新推荐文章于 2024-04-29 07:36:03 发布

Suoz

最新推荐文章于 2024-04-29 07:36:03 发布

阅读量883

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.youkuaiyun.com/Suoz_wly0710/article/details/73611225

版权

CSS3 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了CSS3的Flex布局，重点讲述了Flexbox的主要思想和应用场景，包括主轴、侧轴的概念，以及justify-content、align-items等属性的用法。通过实战案例展示了如何使用Flex布局实现‘三栏布局’，并解释了伸缩性如何控制子元素在容器中的扩展和收缩。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS2.1布局：
1. 块布局：呈现文档的布局模式
2. 行内布局：呈现文本的布局模式
3. 表格布局：用格子呈现2D数据的布局模式
4. 定位布局：能够直接地定位元素的布局模式

Flex布局常用于设计比较复杂的页面，可以轻松的实现浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。比如传统的布局方式是基于盒模型，依赖于display、position属性或者是float属性，但是在传统的布局上面并不好布局; 比如我们想让某个元素垂直居中的话，我们常见的会让其元素表现为表格形式，比如display:table-cell属性什么的，而使用flex布局是非常方便的

CSS3引入的布局模式Flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小)。

flex

（1）主轴：通过这个伸缩盒子特性，可以很好的管理伸缩项目在伸缩盒子中的布局方向。这个（伸缩流）方向可以是从左到右，从上到下，从下到上，从右到左。这个主轴的方向可以通过flex-direction属性来定义值分别为row，row-reverse，column，column-reverse。
（2）主轴起点和终点：伸缩项目从主轴起点开始布局到终点结束。属性justify-content就是根据主轴的起点和终点赋予start，center，end等值来布局的。
（3）侧轴：与主轴垂直的轴是侧轴，所以说，侧轴的方向是由主轴决定的。
（4）侧轴的起点和终点：伸缩项目充满伸缩行，并且伸缩行从侧轴起点开始布局容器到侧轴终点结束。

flexbox规范版本众多，浏览器对此语法支持度也各有不同：
兼容性

在这里就不一一讲解属性，文档上都有各个属性的声明。
传送门 => 配图理解属性文章

定义flex布局：当一个元素变成了伸缩容器，其子元素会自动变成伸缩项目（注：定义之后，子元素的float、clear、vertical-align不再有效）
display

display: -moz-box;  /*旧版本：FF19-*/  
display: -webkit-box;  /*旧版本 ios6-，safari 3.1-6*/  
display: box;  

display: -ms-flexbox;  /*混合版本：IE10*/  

display: -webkit-flex;  /*新版本：chrome等*/  
display: flex;  /*w3c标准*/

指定主轴（伸缩流）方向：只要主轴方向确定下来，垂直于它的侧轴也会随着确定下来。

//主轴方向从左到右
.row{
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;

    -ms-flex-direction: row;

    -webkit-flex-direction: row;
    flex-direction: row;
}

row

//主轴方向从右到左
.row-reverse{
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;

    -ms-flex-direction: row-reverse;

    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

row-reverse

//主轴方向从上到下
.column{
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    box-orient: vertical;

    -ms-flex-direction: column;

    -webkit-flex-direction: column;
    flex-direction: column;
}

column

//主轴方向从下到上
.column-reverse{
    margin-top: 10px;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    box-orient: vertical;

    -ms-flex-direction: column-reverse;

    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

column-reverse

主轴对齐：指的是该”容器”下所有子项目主轴的对齐方式。其实类似于word文档里面文字的左对齐、居中对齐、右对齐、还有它本身的两端对齐、扩散对齐等

侧轴对齐：指的是该”容器”下所有子项目侧轴的对齐方式。其实类似于word文档里面文字的左对齐、居中对齐、右对齐、还有它本身的基线对齐、拉伸对齐等

显示顺序：与主/侧轴对齐不一样的地方是，这个作用在”子项目”下，分别对内部的各个子项目位置进行调整。（注：如果该数值小于0，那么则按照0计算。默认情况下为0。值越大越靠后显示）

-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
box-ordinal-group: 1;

-ms-flex-order: 1;

-webkit-order: 1;
order: 1;

比如给box1设置为1，box2设置为2，box3设置为3，box4不做任何设置（默认为0)。此时显示顺序：4->1->2->3

换行：控制伸缩项目在没有足够空间的伸缩容器中是否换行（注：这里的box-lines对所有浏览器都不兼容，因此在实际项目中不会使用）

.nowrap{
    //默认值
    -moz-box-lines: single; /*无效*/
    -webkit-box-lines: single; /*无效*/
    box-lines: single; /*无效*/

    -ms-flex-wrap: nowrap;

    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.wrap{
    -moz-box-lines: multiple; /*无效*/
    -webkit-box-lines: multiple; /*无效*/
    box-lines: multiple; /*无效*/

    -ms-flex-wrap: wrap;

    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

伸缩性：控制伸缩项目在伸缩容器中扩展或收缩伸缩项目的宽度，用来填充伸缩容器的额外空间

这里重点介绍伸缩性box-flex/flex

伸缩性属性能够灵活地控制子项目在容器中的显示空间（注：这里的显示空间包括项目的宽度和高度）

在一个水平导向框中，首先会计算每个子项目的宽度。
1. 如果所有子项目的宽度之和等于容器宽度，容器就没有额外的空间，这个时候运用在子项目的宽度是每个子项目的宽度。
2. 如果所有子项目的宽度之和小于容器宽度，容器就有额外的空间可用，子项目会根据box-flex/flex属性对应的比例进行扩展。
3. 如果所有子项目的宽度之和大于容器宽度，容器没有额外的空间，子项目会根据box-flex/flex属性对应的比例进行收缩，以防子项目溢出容器外。

考虑第（2）种情况：

-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;

-ms-flex: 1;

-webkit-flex: 1;
flex: 1;

此时将第一个box_240设置为1份，box_510设置为2份。此时会将额外空间210px平均分为三份，每份宽度为70px。box_240将获得70px，box_510将获得70*2px。

结果如图：

考虑第（3）种情况：

这个时候，子项目总宽度溢出了340px。为了不让子项目溢出容器，需要在子项目上设置box-flex/flex属性。

box_240设置为1，box_510设置为1。将溢出的部分平分340px，每份170px，这个时候子项目会按照比例进行收缩。由于都是1份，所以box_240和box_510分别都收缩170px。

结果如图

实战：”三栏布局”

<div id="header">header</div>
<div id="page">
    <div id="main">main</div>
    <div id="sidebar-left">left</div>
    <div id="sidebar-right">right</div>
</div>
<div id="footer">footer</div>

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}
body{
    display: -moz-box;
    display: -webkit-box;
    display: box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

#header,#footer{
    height: 50px;
    background: #ccc;
    text-align: center;
    line-height: 50px;
}
#sidebar-left,#sidebar-right{
    width: 220px;
    background: #f36;
    padding: 10px;

    -moz-box-flex: 2;
    -webkit-box-flex: 2;
    box-flex: 2;
    -ms-flex: 2;
    -webkit-flex: 2;
    flex: 2;
}
#sidebar-right{
    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
}
#main{
    background: pink;
    padding: 10px;

    -moz-box-flex: 5;
    -webkit-box-flex: 5;
    box-flex: 5;
    -ms-flex: 5;
    -webkit-flex: 5;
    flex: 5;

    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
#page{
    text-align: center;

    display: -moz-box;
    display: -webkit-box;
    display: box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

三栏布局