# flex
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
# flex-direction
flex-direction属性决定主轴的方向（即项目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴水平，起点在右端。
- column：主轴垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
# flex-wrap
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap（默认）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
# flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
# justify-content
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等，适用于以前的左右内容居于两端使用float进行布局。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
# align-items
align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
*{
margin:0;
padding:0
}
#k1,#k2,#k3,#k4{
width:500px;
height:100px;
border:1px solid #000000;
display: flex;
}
#k1{
align-items:center;
justify-content: center
}
#k2{
align-items:center;
justify-content:flex-start
}
#k3{
align-items:center;
justify-content:space-around
}
#k4{
align-items:flex-start ;
justify-content:space-around
}
#k1 div,#k2 div,#k3 div,#k4 div{
width:60px;
line-height:60px;
height: 60px;
text-align:center;
border:1px solid red
}
</style>
</head>
<body>
<div id="k1">
<div >1111</div>
<div>2222</div>
<div>3333</div>
</div>
<div id="k2">
<div >1111</div>
<div>2222</div>
<div>3333</div>
</div>
<div id="k3">
<div >1111</div>
<div>2222</div>
<div>3333</div>
</div>
<div id="k4">
<div >1111</div>
<div>2222</div>
<div>3333</div>
</div>
</body>
</html>
# align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
在换行的时候，如果界面选择了换行，元素默认轴线占满整个交叉轴，导致上下两行出现间隙，需要根据情况进行调整。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
# 项目属性
# order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: <integer>;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xxxx</title>
<style>
#main {
width: 400px;
height: 150px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
display: flex;
}
#main div {
width: 70px;
height: 70px;
}
/* Safari 6.1+ */
div#myRedDIV {-webkit-order: 2;}
div#myBlueDIV {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV {-webkit-order: 1;}
/* Standard syntax */
div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 1;}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;" id="myRedDIV"></div>
<div style="background-color:lightblue;" id="myBlueDIV"></div>
<div style="background-color:lightgreen;" id="myGreenDIV"></div>
<div style="background-color:pink;" id="myPinkDIV"></div>
</div>
<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 order 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-order 属性支持该属性。</p>
</body>
</html>
# flex-grow
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
# flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
# flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
# flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
# align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
# grid
# 容器和项目
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
上面代码中，最外层的<div>元素就是容器，内层的三个<div>元素就是项目。
注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的
<p>元素就不是项目。Grid 布局只对项目生效。
# grid-template-columns grid-template-rows
grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
# repeat()
有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上代码用repeat()改写如下。
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
/*对比*/
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
grid-template-columns: repeat(2, 100px 20px 80px);
/*定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px*/
# fr 关键字
为方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
# grid-gap
grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。
.container {
grid-row-gap: 20px;
grid-column-gap: 20px;
}
grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式
.container {
grid-gap: 20px 20px;
}
/*grid-gap: <grid-row-gap> <grid-column-gap>;*/
如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。
# grid-template-areas
是CSS 属性是网格区域 grid areas 在CSS中的特定命名。
# grid-auto-flow
相当于flex的flex-direction，默认row可以修改成column.
grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。
让1号项目和2号项目各占据两个单元格，然后在默认的grid-auto-flow: row情况下，会产生下面这样的布局。
现在修改设置，设为row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。
# autofill
如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
# minmax()
minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
/*minmax(100px, 1fr)表示列宽不小于100px，不大于1fr*/
# auto 关键字
auto关键字表示由浏览器自己决定长度
grid-template-columns: 100px auto 100px;
# justify-items 属性，align-items 属性，place-items 属性
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}
.container {
justify-items: start;
}
.container {
align-items: start;
}
place-items属性是align-items属性和justify-items属性的合并简写形式
place-items: <align-items> <justify-items>;
# justify-content 属性，align-content 属性，place-content 属性
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
start - 对齐容器的起始边框。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
place-content属性是align-content属性和justify-content属性的合并简写形式。
place-content: <align-content> <justify-content>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0;padding:0}
.grid {
display: grid;
width: 100vw;
height: 100vh;
grid-template-columns: 80px 1fr 1fr 1fr 80px;
grid-template-rows: 80px 1fr 1fr 80px;
grid-template-areas: 'title title title title title'
'nav main main main aside'
'nav main main main aside'
'footer footer footer footer footer';
font-size: 30px;
text-align: center;
}
.title {
grid-area: title;
background:orange
}
.nav {
grid-area: nav;
background:red
}
.main {
grid-area: main;
background:#409EFF
}
.aside {
grid-area: aside;
background:limegreen
}
.footer {
grid-area: footer;
background:mediumpurple
}
</style>
</head>
<body>
<section class="grid">
<div class="title">title</div>
<div class="nav">nav</div>
<div class="main">main</div>
<div class="aside">aside</div>
<div class="footer">footer</div>
</section>
</body>
</html>
← 修改css样式方法 媒体查询@media →