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

css3布局属性flex的更多相关文章

  1. web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  2. 前端CSS3布局display:flex用法

    前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...

  3. CSS3基础(3)——CSS3 布局属性全接触

    一. 弹性盒模型 1.弹性盒子模型介绍 弹性盒模型(Flexible Box或Flexbox)是一个CSS3新增布局模块,官方称为CSS Flexible Box Layout Module,用于实现 ...

  4. 前端CSS3布局display:grid用法

    前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...

  5. CSS3动画属性和flex弹性布局各个属性

    [CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...

  6. CSS3新属性之---flex box布局实例

    flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...

  7. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

  8. css3 深入理解flex布局

    一.简要介绍 css3最喜欢的新属性之一便是flex布局属性,用六个字概括便是简单.方便.快速. flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性 ...

  9. 响应式布局(CSS3弹性盒flex布局模型)

    传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型 flex弹性布 ...

随机推荐

  1. RabbitMQ知多少

    1.引言 RabbitMQ--Rabbit Message Queue的简写,但不能仅仅理解其为消息队列,消息代理更合适.RabbitMQ 是一个由 Erlang 语言开发的AMQP(高级消息队列协议 ...

  2. hihocoder 1050 树中的最长路(动态规划,dfs搜索)

    hihocoder 1050 树中的最长路(动态规划,dfs搜索) Description 上回说到,小Ho得到了一棵二叉树玩具,这个玩具是由小球和木棍连接起来的,而在拆拼它的过程中,小Ho发现他不仅 ...

  3. hadoop 50070 无法访问问题解决汇总

    遇到这个其实不难解决! 解决办法1: [root@djt002 hadoop]# vi /etc/selinux/config 改为 SELINUX=disabled 解决办法2: 查看你的$HADO ...

  4. 20170713_js闭包/匿名函数/作用域

    js:闭包 var getNum; function getCounter() { var n = 1; var inner = function () {return n++; } console. ...

  5. 浅谈redux-form在项目中的运用

    准则 先说一下redux的使用场景,因为如果没有redux,那更不会有redux-form. redux基于Flux架构思想,是一个状态管理框架,其目标是解决单页面应用中复杂的状态管理问题. 日常前端 ...

  6. FTP publisher plugin插件

    说明:这个插件可以将构建的产物(例如:Jar)发布到FTP中去. 官方说明:FTP publisher plugin 安装步骤: 系统管理→管理插件→可选插件→Artifact Uploaders→F ...

  7. (转)AJax跨域:No 'Access-Control-Allow-Origin' header is present on the requested resource

    在本地用ajax跨域访问请求时报错: No 'Access-Control-Allow-Origin' header is present on the requested resource. Ori ...

  8. aspcms多图调用以及错误提示:3704

    1.“为师资介绍”(相册列表)建立了内容页(相册内容页), 需要对模板页面改造,在相册详细页调用多图,之前没有试过,这次利用: 实现多图调用,注意不能使用contentid=[content:id]  ...

  9. 【HTML】DocType

    一.docType是什么 <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 在 HTML 4.01 中,<!D ...

  10. 聊聊synchronized的锁问题

    本文不会特别深入细致地讨论synchronized,只是做一个通俗易懂的说明,以及看清一类问题的本质,希望能给大家一点启发. 问题描述 有一个类A,提供了三个方法.分别是静态同步方法,非静态同步方法, ...