文章目录
flex 伸缩布局基本介绍容器属性弹性元素属性导航栏
flex 伸缩布局
flex是CSS的一种布局手段，主要来代替浮动完成页面布局。flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变。
基本介绍
.box {
display: flex
;
}
默认情况
主轴：水平的主轴（main axis）交叉轴：垂直的侧轴（cross axis）方向：默认主轴从左向右，侧轴默认从上到下，主轴和侧轴可以通过flex-direction属性互换
容器属性
属性说明
flex-direction主轴方向row：默认值，主轴为水平方向，弹性元素水平从左向右排列row-reverse：主轴为水平方向，弹性元素水平从右向左排列column：主轴为垂直方向，弹性元素垂直从上向下排列 column-reverse：主轴为垂直方向，弹性元素垂直从下向上排列flex-wrap弹性元素是否可换行nowrap：默认值，不换行wrap：自动换行，第一行在上方wrap-reverse：反方向换行，第一行在下方flex-flowflex-direction和flex-wrap的简写justify-content弹性元素在主轴上的对齐方式flex-start：默认值，左对齐flex-end：右对齐center ：居中space-around：空白分布在元素两侧space-between ：两端对齐，空白均匀分布在元素间space-evenly：空白分布在元素的单侧align-items弹性元素在交叉轴上的对齐方式stretch：默认值，元素若没有设置高度，则占满容器高度flex-start：交叉轴起点对齐flex-end：交叉轴终点对齐center：交叉轴中点对齐baseline：文字基线对齐align-content当多条主轴时，弹性元素在交叉轴上的对齐方式，对单行没有效果stretch：默认值，元素若没有设置高度，则占满交叉轴flex-start：交叉轴起点对齐flex-end：交叉轴终点对齐center：交叉轴中间对齐space-between：两端对齐，空白均匀分布space-around：轴线两侧空白均匀分布
弹性元素属性
属性说明
order元素在容器中点排列顺序默认值为0，数值越小越靠前flex-basis计算主轴是否有剩余空间默认值为auto，为元素的原本大小；若设置值后元素的宽度设置会失效；若值为0%则元素为零尺寸flex-grow增长系数默认值为0，等分剩余空间flex-shrink缩减系数默认值为1，当空间不足时，等比例缩小flexflex-grow，flex-shrink，flex-basis的简写两个快捷值：auto (1 1 auto) 、 none (0 0 auto)align-self单独设置元素的对齐方式
.item{
flex: 1
;
}
.item{
flex-grow: 1
;
flex-shrink: 1
;
flex-basis: 0%
;
}
.item{
flex: 0
;
}
.item{
flex-grow: 0
;
flex-shrink: 1
;
flex-basis: 0%
;
}
.item{
flex: 0%
;
}
.item{
flex-grow: 1
;
flex-shrink: 1
;
flex-basis: 0%
;
}
导航栏
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.nav {
width: 1210px;
height: 48px;
line-height: 48px;
background-color: #E8E7E3;
margin: 50px auto;
display: flex;
}
.nav li {
flex: 1;
}
.nav a {
display: block;
color: #808080;
text-decoration: none;
font-size: 16px;
text-align: center;
}
.nav a:hover {
background-color: #636363;
color: #fff;
}
</style>
<body>
<ul class="nav">
<li><a href="#">HTML/CSS
</a></li>
<li><a href="#">Browser Side
</a></li>
<li><a href="#">Server Side
</a></li>
<li><a href="#">Programming
</a></li>
<li><a href="#">XML
</a></li>
<li><a href="#">Web Building
</a></li>
<li><a href="#">Reference
</a></li>
</ul>
</body>
