多列布局
- column-count: 指定列数，值是数字
- column-width: 指定列宽，值是长度
- columns: 同时指定列宽和列数，复合属性：值没有数量和顺序要求
- column-gap: 设置列边距，值是长度
- column-rule-style: 设置列与列之间边框的风格
- column-rule-width：设置列与列之间边框的宽度，值是长度
- column-rule-color:设置列与列之间边框的颜色
- column-rule: 设置列边框，复合属性
- column-span: 指定是否跨列；值：none、all
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
.newspaper
{
columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
}
</style>
</head>
<body>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
</style>
</head>
<body>
<div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>
</body>
</html>伸缩盒模型
- 2009年，W3C提出了一种新的盒子模型--Flexible Box (伸缩盒模型，又称：弹性盒子)
- 它可以轻松的控制：元素分布方式、元素对齐方式、元素视觉顺序…
- 伸缩盒模型的出现，逐渐演变出了一套新的布局方案一一flex布局
- 传统布局是指：基于传统盒状模型，主要靠：display属性+position属性+float属性
- flex布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上
伸缩容器、伸缩项目
- 开启了flex 的元素，就是伸缩容器。
- 给元素设置：display: flex或display: inline-flex,该元素就变为了伸缩容器。
- display: inline-flex很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。
- 伸缩容器所有子元素就是伸缩项目。
- 伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。
- 无论原来是哪种元素(块、行内块、行内)，一旦成为了伸缩项目，全都会“块状化”。
- 一个元素可以同时是：伸缩容器、伸缩项目。
主轴、侧轴
- 主轴：伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右
- 侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下
- flex-direction主轴方向
- row: 主轴方向水平从左到右一一默认值
- row-reverse: 主轴方向水平从右到左
- column: 主轴方向垂直从上到下
- column-reverse: 主轴方向垂直从下到上
- flex-wrap主轴换行方式
- nowrap: 默认值，不换行
- wrap: 自动换行，伸缩容器不够自动换行
- wrap-reverse: 反向换行
- justify-content主轴对齐方式
- flex-start:主轴起点对齐--默认值
- flex-end:主轴终点对齐
- center:居中对齐
- space-between:均匀分布，两端对齐（最常用）
- space-around:均匀分布，两端距离是中间距离的一半
- space-evenly:均匀分布，两端距离与中间距离一致
- 侧轴对齐方式
- align-items 单行侧轴对齐
- flex-start:侧轴的起点对齐
- flex-end:侧轴的终点对齐
- center:侧轴的中点对齐
- baseline:伸缩项目的第一行文字的基线对齐
- stretch:如果伸缩项目未设置高度，将占满整个容器的高度（默认值）
- align-content 多行侧轴对齐
- flex-start:与侧轴的起点对齐
- flex-end:与侧轴的终点对齐
- center:与侧轴的中点对齐
- space-between：与侧轴两端对齐，中间平均分布
- space-around:伸缩项目间的距离相等，比距边缘大一倍
- space-evenly:在侧轴上完全平分
- stretch:占满整个侧轴（默认值）
- align-self 单独对齐
- 默认值为auto,表示继承父元素的align-items属性。
- align-items 单行侧轴对齐
- 水平垂直居中
- 方法一：父元素 display: flex; justify-content: center; align-items: center;
- 方法二：父元素 display: flex; 子元素 margin: auto;
- flex-basis 主轴上的基准长度
- flex-basis设置的是主轴方向的基准长度，会让宽度或高度失效。
- 主轴横向：宽度失效：主轴纵向：高度失效
- 浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值auto
- flex-basis设置的是主轴方向的基准长度，会让宽度或高度失效。
伸缩性
- flex-grow（伸）
- 默认为0，即：纵使主轴存在剩余空间，也不拉伸
- 若所有伸缩项目的flex-grow值都为1，则：它们将等分剩余空间
- 若三个伸缩项目的flex-grow值分别为：1、2、3，则分别占1/6、2/6、3/6的空间
- flex-shrink (缩）
- 默认为1，即：如果空间不足，该项目将会缩小。
三个收缩项目，宽度分别为：200px、300px、200px,它们的flex-shrink值分别为：1、2、3
若想刚好容纳下三个项目，需要总宽度为700px
若宽度不够，假设需要收缩100，计算方式如下：
1.计算分母：(200×1)+(300×2)+(200×3)=1400
2.计算比例：
项目一：(200×1)/1400=比例值1
项目二：(300×2)/1400=比例值2
项目三：(200×3)/1400=比例值3
3.计算最终收缩大小：
项目一需要收缩：比例值1×100
项目二需要收缩：比例值2×100
项目三需要收缩：比例值3×100
项目排序
- order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
