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

css布局属性flex的相关文章

CSS布局属性

一.CSS布局属性 Width:设置对象的宽度(widteight:设置对象的高度(Height:45px;).ackground:设置对象的背景颜色.背景图像. 1.背景颜色 background:#09F; 2.背景图像 background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x; repeat-x代表横向重复,还可以设置repeat-y. Float: Float属性是DIV+CSS布局中最基本也是最常

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>&l

CSS布局之Flex布局

Flex布局,可以简便.完整.响应式地实现各种页面布局. 浏览器支持:得到所有浏览器的支持.(注:Flex布局将成为未来布局的首选方案) 一. Flex布局的概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. 定义: 1 div{ 2 display: flex; 3 } 4 5 /*行内元素*/ 6 div{ 7 display: inline-flex; 8 } 9 10 /*-webkit-内

CSS 布局属性(display,float,clear,visibility,overflow,overflow-x,overflow-y)

display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group |  |  |  |  |  | |  默认值:inline 适用

&lt;转载&gt;Div+Css布局教程(-)CSS必备知识

目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的高度(Height:45px;). Background:设置对象的背景颜色.背景图像. 1.背景颜色 background:#09F; 2.背景图像 background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;

Div+Css布局教程(-)CSS必备知识

目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的高度(Height:45px;). Background:设置对象的背景颜色.背景图像. 1.背景颜色 background:#09F; 2.背景图像 background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;

引用Normalize.css之后,flex布局失效的原因以及解决办法

昨天无意知道Normalize.css框架.于是在最近使用了h5属性的项目中引用来玩玩.但是习惯了用通配符去重置.在引用Normalize.css之后各种不适.最直接的影响,比如我对footer header等H5标签容器设置了display:flex;却没有任何效果.打开浏览器审查元素发现, Normalize.css给h5的这些标签预定义了display:block.而且权值非常高,把我自己footer的display:flex覆盖掉了,这就是我设置flex布局属性不起作用的原因. 解决方法

HTML/CSS:display:flex 布局教程

网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex 布局将成为未来布局的首选方案.本文介绍它的语法,下一篇文章给出常见布局的 Flex 写

CSS布局 ——从display,position, float属性谈起

页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Mastery>后总结一下. 让我们从基础的CSS知识谈起,相信很多初学者和小弟一样不明白CSS原理,一味追求效果,结果页面漏洞百出,错误匪夷所思,关于盒模型我就不多说了,网上很多,注意一下IE和其他浏览器(W3C规范)的区别就好了. 块级元素与行内元素 首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ul