使用css3布局属性flex详细介绍

来源：动视网责编：小采时间：2020-11-27 18:52:30

使用css3布局属性flex详细介绍

使用css3布局属性flex详细介绍:这篇文章讲述使用css3布局属性flex详细介绍html代码如下:<ul class="ul_box"> <li><a href="#">html</a></li> <li><a href="#">

推荐度：

导读使用css3布局属性flex详细介绍:这篇文章讲述使用css3布局属性flex详细介绍html代码如下:<ul class="ul_box"> <li><a href="#">html</a></li> <li><a href="#">

这篇文章讲述使用css3布局属性flex详细介绍

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:0;
 padding: 0;
 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，即项目的本来大小。