CSS 弹性布局Flex详细讲解(Flex 属性详解、场景分析)
目录
前言
我们知道，网页展示就好比一个个盒子堆叠在一起，通过调整盒子的大小、位置、样式等，形成了各式各样的页面。当我们在开发一个页面的时候，我们常规的做法可能是：搭建框架、划分区域、定制排版、调整位置、嵌入内容、微调与增添样式。
布局排版是页面基础且关键的一环。其中，常用的自适应布局技术：Flex布局。
Flex 布局是什么？
Flex 简介
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box {
display: flex;
}
行内元素也可以使用 Flex 布局。
.box {
display: inline-flex;
}
Webkit 内核的浏览器，必须加上前缀。
.box {
display: -webkit-flex; /* Safari */
display: flex;
}
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
Flex 容器属性
接下来，咱们通过具体实例介绍Flex属性的使用与其在布局上达成的效果。
Flex 基本使用
场景一
整个页面分为两大部分，我们希望左边部分作为菜单栏，宽度固定；右边部分作为内容展示区，宽度自适应且占满剩余部分。
类似如下布局
常规方式：浮动（float）
首先，将框架搭起来
为了方便查看效果，给每个盒子设置大小与添加背景色
页面展示效果
2、布局右边部分
里面分为三部分（用一个新的div包裹，结构分明）
html
css
.right-content-item {
width: 100%;
height: 100%;
}
.right-content-item-list {
width: 30%;
height: 30%;
background: rgb(242, 245, 37);
}
页面展示效果
此时右边部分（新增的div）内容区使用flex布局
.right-content-item {
width: 100%;
height: 100%;
display: flex;
}
页面展示效果
此时使用justify-content属性
.right-content-item {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
}
页面展示效果
缩小窗口，查看页面展示效果
无论窗口放大或缩小，都能实现自适应。在该例子中，可以知道，flex布局里面的子盒子依然可以使用flex布局，即可以嵌套使用，可用该特点结合flex中的各个属性实现多种自适应布局场景。
最后flex-flow跟align-content不展开，可以自行了解。
参考文章：
Flex 布局教程：语法篇
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
到此这篇关于Css 弹性布局Flex详细介绍(Flex 属性详解、场景分析)的文章就介绍到这了,更多相关css 弹性布局Flex内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！