html代码如下:
<ul class="ul_box">
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">html5</a></li>
<li><a href="#">css3</a></li>
<li><a href="#">jquery</a></li>
</ul>
css代码如下:
.ul_box{
margin:;
padding:;
list-style: none;
/*display: flex将对象作为弹性伸缩盒显示;
flex-flow:flex-direction(确定弹性子元素排列方式)和
flex-wrap(当弹性子元素超出弹性元素容器范围时是否换行)的复合属性,
写入父容器里; */
display: flex;
flex-flow: row wrap;
}
.ul_box li{
text-align: center;
height:40px;
line-height: 40px;
/*flex:flex-grow(设置弹性子元素的扩展比率)
* flex-shrink(设置弹性子元素的收缩比率)
* flex-basis(指定弹性子元素伸缩前的默认大小值，相当于width和height属性。)
* 这三种属性的复合属性，写入子容器里;*/
flex: 1 1 100%;
}
.ul_box li a{
text-decoration: none;
color:#fff;
}
.ul_box li:nth-child(1){
background: #008000;
}
.ul_box li:nth-child(2){
background: #4169E1;
}
.ul_box li:nth-child(3){
background: #8A2BE2;
}
.ul_box li:nth-child(4){
background: #A52A2A;
}
.ul_box li:nth-child(5){
background: #FFA500;
}
.ul_box li:nth-child(6){
background:#9ACD32;
}
@media (min-width:480px ) {
.ul_box li{
flex: 1 1 50%;
}
}
@media (min-width:768px ) {
.ul_box{
flex-flow: row nowrap;
}
}
以下6个属性设置在容器上：
- flex-direction 容器内项目的排列方向(默认横向排列)
- flex-wrap 容器内项目换行方式
- flex-flow 以上两个属性的简写方式
- justify-content 项目在主轴上的对齐方式
- align-items 项目在交叉轴上如何对齐
- align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
容器中项目的属性：
order 项目的排列顺序。数值越小，排列越靠前，默认为0。flex-grow 项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis 在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。flex 是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。