CSS弹性盒⼦布局使⽤⽅法介绍
标题
CSS 弹性盒⼦布局
是 CSS 的模块之⼀，定义了⼀种针对⽤户界⾯设计⽽优化的 CSS 盒⼦模型。在弹性布局模型中，弹性容器的⼦元素可以在任何⽅向上排布，也可以“弹性伸缩”其尺⼨，既可以增加尺⼨以填满未使⽤的空间，也可以收缩尺⼨以避免⽗元素溢出。⼦元素的⽔平对齐和垂直对齐都能很⽅便的进⾏操控。通过嵌套这些框（⽔平框在垂直框内，或垂直框在⽔平框内）可以在两个维度上构建布局。
CSS 属性
CSS 弹性盒⼦布局的css分两种：
⼀种是应⽤中⽗容器的的CSS,⽤于设定⽗容器本⾝或者全部⼦元素的表现形式
另⼀种则是应⽤在⼦元素上，⽤于设置单个⼦元素的表现⾏为
下⾯将逐⼀展⽰css代码和效果
应⽤在⽗容器元素上的CSS属性
1.display: flex | inline-flex;
⽤于设定⼀个flex（**弹性盒⼦布局**）容器
flex 设定⼀个块级的flex（弹性盒⼦布局）容器cssclass属性
<ul >
<li>1</li>
<li>2</li>
</ul>
<ul >
<li>1</li>
<li>2</li>
</ul>
inline-flex 设定⼀个⾏内的flex（弹性盒⼦布局）容器
<ul >
<li>1</li>
<li>2</li>
</ul>
<ul >
<li>1</li>
<li>2</li>
</ul>
2. flex-direction
设置伸缩盒对象的⼦元素在⽗容器中位置
1. flex-direction: row; 设置伸缩盒对象的⼦元素在⽗容器中的⽔平分布并靠在⽗容器的左侧
<ul class="box" >
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
1. flex-direction: row-reverse; 设置伸缩盒对象的⼦元素在⽗容器中的位置⽔平逆序分布并靠在⽗容器
的右侧
<ul class="box" >
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
2. flex-direction: column; 设置伸缩盒对象的⼦元素在⽗容器中的位置垂直分布并靠在⽗容器上⾯
<ul class="box" >
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
3. flex-direction: column-reverse; 设置伸缩盒对象的⼦元素在⽗容器中的位置垂直逆序分布并靠在⽗容器底部
<ul class="box" >
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
3. flex-wrap
设置伸缩盒对象的⼦元素超出⽗容器时是否换⾏
1. flex-wrap: nowrap; 设置伸缩盒对象的⼦元素超出⽗容器时是不换⾏，如果没有设置min-width，这样会压缩⼦元素的width
<ul class="box" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
2. flex-wrap: wrap; 设置伸缩盒对象的⼦元素超出⽗容器时是换⾏
<ul class="box" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
3. flex-wrap: wrap-reverse; 设置伸缩盒对象的⼦元素超出⽗容器时是⾃下⽽上换⾏
<ul class="box" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
4. flex-flow
复合属性，设置伸缩盒对象⼦元素的排列⽅式
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
<ul class="box" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
5. justify-content
设置或检索弹性盒⼦元素在⽔平⽅向上的对齐⽅式。
1. justify-content:flex-start; 设置伸缩盒对象的⼦元素在⽗容器中⽔平⽅向上左对齐
<ul class="box" >
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
2. justify-content:flex-end; 设置伸缩盒对象的⼦元素在⽗容器中⽔平⽅向上右对齐
<ul class="box" >
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
3. justify-content:center; 设置伸缩盒对象的⼦元素在⽗容器中⽔平⽅向上居中对齐
<ul class="box" >
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
4. justify-content:space-around; 设置伸缩盒对象的⼦元素在⽗容器中⽔平⽅向上平均分布

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。