文档章节

css3布局属性flex

Akillua
 Akillua
发布于 2017/07/27 10:55
字数 586
阅读 3
收藏 0

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

 

© 著作权归作者所有

上一篇: HTML格式化
下一篇: css3动画animation
Akillua
粉丝 0
博文 43
码字总数 19935
作品 0
郑州
私信 提问
CSS3 Flex布局(伸缩布局盒模型)学习

https://www.cnblogs.com/sxz2008/p/6635196.html 实例:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html CSS2定义了四种布局:块布局、行内布局、表格布局盒定位布局。 CSS3引入...

壹峰
2018/08/08
0
0
学习CSS3伸缩布局盒模型Flex布局

一、Flex 布局是什么? CSS3引入了一种新的布局模式——Flexbox布局,即伸缩盒模型布局(Flexible Box)模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使它们的...

侠客有情剑无情QAQ
2018/08/19
0
0
从零开始学 Web 之 CSS3(七)多列布局,伸缩布局

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/08/06
0
0
Flexible Box 布局与小程序开发

Flexible Box 布局与小程序开发 参考资料: 1.A Complete Guide to Flexbox BY CHRIS COYIER 2.Flex 布局教程:语法篇 3.Flex 布局教程:实例篇 4.A Visual Guide to CSS3 Flexbox Propertie......

坚果jimbowhy
2018/05/27
0
0
css3最全flex布局结构整理

一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左...

韦姣敏
2018/05/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部