最近喜欢flex布局,它可以完美的实现响应式布局,下边我总结了它的一些常用属性,喜欢的,也可以练习写一下,很好用~~~

注意:使用了flex布局,对于子元素的floatclearvertical-align属性将失效。

1.以下6个属性设置在容器上

flex-direction row/row-reverse/column/column-reverse 决定主轴的方向(即项目的排列方向)
flex-wrap       wrap/nowrap/wrap-reverse 决定项目排列方式
flex-flow <flex-direction>|<flex-wrap> 前两者简写形式,默认flex-flow:row nowrap
justify-content flex-start/flex-end/center/space-between/space-around

决定项目在主轴的对齐方式

* space-between:两端对齐,项目之间的间隔都相等。

* space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

align-items flex-start/flex-end/center/baseline/stretch

定义项目在交叉轴上如何对齐

* baseline: 项目的第一行文字的基线对齐。

* stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

 align-content flex-start/flex-end/center/space-between/space-around/stretch 定义多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

2.以下6个属性设置在项目上

oreder .item{order:1} 定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex-grow .item{flex-grow:<number>}

定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

(如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。)

flex-shrink .item{flex-shrink:<number>/*default 1*/} 定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。(如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。)
flex-basis .item{flex-basis:length/*default auto*/} 定义在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。(注:它可以设为跟widthheight属性一样的值(比如350px),则项目将占据固定空间。)
flex .item{flex:none}

flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

align-self .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

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

  1. flex布局justify-content属性和align-items属性设置

    前言: flex最常用的就是justify-content和align-items了,这里把这两个属性介绍下,大家更多关于flex布局可以查看阮一峰的日志,写的非常清楚! 阮一峰flex布局的日志:h ...

  2. 【Android自学日记】五大布局常用属性

    线性布局(LinearLayout)常用属性: android:orientation="vertical"--决定子类控件的排布方式(vertical垂直:horizontal水 ...

  3. android布局常用属性记录

    android布局常用属性记录   http://blog.csdn.net/xn4545945/article/details/7717086这里有一部分别人总结的其余的: align:对齐 par ...

  4. Flex布局 Flexbox属性具体解释

    原文:A Visual Guide to CSS3 Flexbox Properties Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐.方向.顺序,甚 ...

  5. 深入理解line-height与vertical-align——前端布局常用属性

    line-height.font-size.vertical-align是设置行内元素布局的关键属性.这三个属性是相互依赖的关系,改变行间距离.设置垂直对齐等都需要它们的通力合作.下面将主要介绍lin ...

  6. Android 相对布局常用属性

    Android 布局属性详解 RelativeLayout用到的一些重要的属性: 第一类:属性值为true或false     android:layout_centerHrizontal  水平居中 ...

  7. Android 控件布局常用属性

    <!--单个控件经常用到android:id —— 为控件指定相应的IDandroid:text —— 指定控件当中显示的文字,需要注意的是,这里尽量使用strings.xml文件当中的字符串a ...

  8. 记录Flex布局的属性

    容器属性 flex-dirextion(主轴的方向):>>row(水平) | row-reverse(水平取反) | column(垂直) | column-reverse(垂直取反) f ...

  9. React Native入门教程 3 -- Flex布局

    上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...

随机推荐

  1. c#通过反射获取自定义属性

    PropertyInfo[] properties = typeof(BPM_ContractApproval_Purchase).GetProperties(); foreach (var prop ...

  2. CSS小随笔(三)浮动与定位

    先来说一下CSS中的浮动 一.浮动 1.标准流中的块级盒子,宽度将自动伸展为100%,而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开 2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存 ...

  3. Java的HashMap实现原理整理总结

    通过Debug 探寻Java-HashMap 实现原理: 一个简单的例子,代码如下, 测试方法 main: public static void main(String[] args) { KeyOb ...

  4. Java基础---GUI

    第一讲     GUI(用户图形界面) 一.概述 1.GUI:GraphicalUser Interface,即图形用户界面,用于计算机与用户交互的一种方式. 2.计算机与用户交互的两种方式:GUI和 ...

  5. python基础学习(十三)

    re模块包含对 正则表达式.本章会对re模块主要特征和正则表达式进行介绍. 什么是正则表达式 正则表达式是可以匹配文本片段的模式.最简单的正则表达式就是普通字符串,可以匹配其自身.换包话说,正则表达式 ...

  6. 两个input在同一行连着不留缝隙

    方法1:让两个input 连在一起写 不换行 <div class="inputDiv"> <input type="text" placeh ...

  7. CVTE前端笔试编程题

    这些题目是做完笔试之后,在别的地方找到的,现在附上. 1.(1)这题考察的怎么把参数转换为数组,然后再截取你想要的位数. function C(){ var a_args=Array.prototyp ...

  8. 大型网站的 HTTPS 实践(三)——基于协议和配置的优化

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt389 1 前言 上文讲到 HTTPS 对用户访问速度的影响. 本文就为大家介 ...

  9. poj2942(双联通分量,交叉染色判二分图)

    题意:一些骑士,他们有些人之间有矛盾,现在要求选出一些骑士围成一圈,圈要满足如下条件:1.人数大于1.2.总人数为奇数.3.有仇恨的骑士不能挨着坐.问有几个骑士不能和任何人形成任何的圆圈. 思路:首先 ...

  10. tkinter第一章

    tk1 ------------------------------------------------------------------------------------------ impor ...