css3布局属性flex

2018-06-24 01:05:17来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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,即项目的本来大小。
  • flex  是flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
  • align-self  允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:水平垂直居中图片及文字(兼容IE6+)实例

下一篇:css常用属性总结:文本属性中的text-align