1.分栏布局
- 设置最大栏数：
column-count：数值 + 单位 - 设置每栏最小宽度：
column-width: 数值 + 单位 - 设置栏间距：
column-gap: 数值 + 单位 - 设置栏分隔线：
column-rule: 3px solid blue;
(线型：dashed dotted double) - 设置是否跨栏显示：
column-span : none(否)|all(是)
注：该属性是给需要跨栏显示的元素添加（eg:新闻标题）
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
border: 1px solid blue;
column-count: 3;
column-gap: 20px;
column-rule: 2px solid gray
}
.box h3{
column-span: all;
}
</style>
<body>
<div class="box">
<h3>关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。</h3>
<p>
关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。
</p>
</div>
</body>
2.弹性布局
语法：display：flex
- 说明：
- 当给元素设置了display：flex；就称之为弹性布局
- 当给父元素设置flex布局后，子元素的
float，clear，vertical-align将不起作用 - 我们把设置了flex布局的父元素叫做
flex容器，子元素叫做flex项目 - 当设置flex布局后，会产生两根轴线，
主轴和交叉轴（也叫做侧轴）
3.flex容器属性
3.1 设置主轴方向（flex项目排列的方向）
语法：flex-direction:row|row-reverse|column|column-reverse; |
|---|
row 默认值，主轴在水平方向，起点在左端row-reverse 主轴在水平方向，起点在右端column 主轴在垂直方向，起点在上沿column-reverse 主轴在垂直方向，起点在下沿
3.2 设置flex项目单行或多行显示
语法：flex-wrap : nowrap | wrap | wrap-reverse; |
|---|
nowrap 默认值，flex项目在一行显示wrap flex项目多行显示wrap-reverse 与wrap相似，但行的顺序是倒过来的
3.3flex-direction和flex-wrap的简写方式
flex-flow:row nowrap；默认值
3.4设置主轴对齐方式
语法：justify-content: flex-start|flex-end|center|space-between|space-around |
|---|
flex-start: 对齐主轴的起点flex-end : 对齐主轴的终点center : 居中对齐space-between : flex项目两端对齐，中间间隔相等space-around : flex项目两侧间隔相等
3.5设置交叉轴对齐方式
语法：align-items: flex-start | flex-end | center | baseline | stretch |
|---|
flex-start : 对齐交叉轴的起点flex-end : 对齐交叉轴的终点center ： 以交叉轴为参考，居中对齐baseline ： flex项目第一行文字基线对齐stretch ： flex项目没有设置高度或为auto时，将占满整个父元素高度
3.6设置多根轴线对齐方式（flex项目多行显示时使用）
语法：align-content: flex-start | flex-end | center |space=between | space-around |stretch |
|---|
- flex-start : 对齐交叉轴的起点
- flex-end： 对齐交叉轴的终点
- center ： 以交叉轴为参考居中对齐
- space-between： 交叉轴两端对齐，轴线之间的间隔平均分布
- space-around: flex项目（沿交叉轴方向）之间的间隔相等
- stretch： flex项目没有设置高度或为auto时，将占满整个父元素高度
3045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
