code前端网css重点：Flex弹性布局的属性及使用
正常流（文档流）
浮动+清除
右位置+绝对
显示
负边距
使用了这些属性设置一些页面自定义布局时要一起实现所需的页面，有点麻烦
1 Flex模式简介
Flex是Flexible Box的缩写，意为“灵活设计”
1.1 Flex模式的特点
- B垂直，而内联布局侧重于水平方向，而Flex布局是独立方向
- Flex布局可以自动感知位置并自动对齐（灵活，灵活）
- Flex布局适合简单的线性布局，并且用于比较复杂的布局
1.2开启Flex布局
开启Flex布局时，需要在父元素上输入display: flex;，如下图：
.box{
display: flex;
}
//行内元素也可以
.box{
display: inline-flex;
}
//Webkit内核的浏览器，需加上前缀
.box{
display: -webkit-flex;
}
1.3基本Flex 容器的概念
使用 Flex 模式 元素可以视为 Flex 容器，其属性如下图所示：
Flex 机架有两个轴：主轴。轴（主轴）和交叉轴（交叉轴）。默认情况下，长轴水平分割，侧轴垂直分割，但可以使用 flex-direction 更改长轴和侧轴的分割。因此，不能说水平截面是主轴，垂直截面是横轴。？
align-items
align-content
2.1 flex-direction
flex-direction该属性定义主轴的方向，不能在轴之前说。主轴和垂直是侧轴，也就是因为这个特性），一共有4个值：
row：默认值，主轴从左到右是水平的；
line-reverse：主轴从右向左水平；
立柱：主轴从上到下垂直；
column-reverse：主轴从下到上垂直
示意图为：
代码实现效果如下：
2.2 flex-wrap❀,Defaultchild Flex 容器中的元素都是对齐的。如果子元素的宽度之和大于父元素的宽度，则子元素将被压缩。属性flex-wrap可以设置小元素换行。它有 3 个值：
nowrap：默认值，不换行
换行：换行，上方第一行
换行：换行，下方第一行
模式 图标为：
代码实现为： 
2.3 flex-flow
flex-flow属性为flex-direction ❀ ，将两个属性写在一起，先写入 flex-direction，然后写入 flex-wrap 。默认值为 row nowrap
代码实现的解释为：
2.4 justify-content
justify-content属性指定轴的主要元素。它有 5 个主要值：
flex-start：默认值，从起点开始
flex-end：调整到终点
cneter：调整中心
，子元素之间的间距相等
space-surrounding：每个子元素左右间距相等
示意图为：
代码实现解释为： 
2.5align-items align-items该属性定义边缘上的子元素 对齐方式最多由 5 个值组成：
strech：默认值，子元素的高度覆盖父元素 ❀❀ start：子元素对齐与交叉轴的起点
flex-end：子元素与交叉轴的终点对齐
center：子元素根据交叉轴
居中 基线：与第一个对齐子元素中的文本行（当字体大小不匹配时，效果会突出显示）
注意： 应用此属性时，子元素的高度。该元素不能嵌套，必须在横轴上的子元素的多轴对齐内容中支持，并且仅对多行显示有效。以下5个值必不可少：
stretch：默认值，轴覆盖侧轴
flex-start：对应轴的起点
flex-end：对应轴的终点边缘
中心：与轴中心对齐
space- Between：对齐轴两端，轴之间距离相同
space-surround：每个轴两个相等边之间的距离
图标为：
代码 应用程序的解释为： 
3 元素属性
Flex 元素可以设置 6 个属性，包括：
flex-grow
伸缩收缩
伸缩底座
伸缩
订单❀-self1。
flex-grow 属性指定当父元素有剩余空间时分配给每个子元素的空间比例。默认当0时表示不除法；如果是数值，则表示分配给每个子元素的父元素剩余空间的分数，而不是扩展后子元素大小的比例。shrink属性
flex-shrink有对性状flex-grow产生相反的影响。这意味着当子元素的宽度之和大于父元素的宽度并且不显示在换行符上时，每个子元素都会被压缩。默认为1，表示每个子元素均等压缩；当数值不相同时，表示每个元素的尺寸因压缩空间而减小，而不是压缩后较小元素尺寸的比例 特性 3.3 flex-basis
flex-basis 可用于设置子元素的间距。默认值为 auto，这意味着这是默认大小。当父元素还有剩余空间时，可以使用该属性来扩展子元素的空间；当扩展后每个子元素的总空间超过父元素的空间大小时，空间将按值flex-basis的值按比例增加。设置子元素的大小。当没有 flex-basis 属性时，默认的 flex-basis 值是子元素的原始大小，这样总空间不超过子元素。父元素大小
代码实现翻译为：
3.4 flex
flex属性为flex-grow溜冰场 和flex -basis 集合，默认值为 0 1 auto，后两个字符不需要写
3.5 个命令 ❀ 子组件，默认值为 0，值越高，越小，越高级
默认代码为： 
3.6align-self
auto：继承 line 除了该值外，其他值与父体 代码翻译为： 代码解释为： 代码订购是： 无论子元素如何调整父元素大小，子元素始终居中 作者：YyzclYang enable ♿ 独立设置对齐方式，优先级高于 对齐项目 高。默认值为 auto，这意味着它从父元素继承 align-items。如果没有父元素，则相当于stretch。它可以设置以下属性： align-items
stretch
flex-startalign-itemd 的效果相同 4 Flex Flex Flex Flex 布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body{
display: flex;
flex-direction: column;
height: 100vh;
}
header{
height: 100px;
background: #ddd;
}
main{
flex-grow: 1;
}
footer{
height: 100px;
background: #ddd;
}
</style>
</head>
<body>
<header>heafer</header>
<main>main</main>
<footer>footer</footer>
</body>
</html>
4.2 九方网格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{padding:0;}
ul{
list-style: none;
border: 1px solid black;
width: 170px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
li{
width: 50px;
height: 50px;
border: 1px solid red;
margin: 5px 0;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
4.3 一般 PC 排列 ❀4 代码排序为：
4.3 一般 PC 排列 ❀：A .绝对居中
链接：https://juejin.im/post/5b0d65090d8f26344d90
来源：掘金
版权归作者所有。如需商业印刷，请联系作者以获得许可。非商业转载请注明来源。
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
