Flex布局属性总结

原创 2016年08月30日 15:23:39

1)Flex布局父容器属性

flex-direction / flex-wrap flex-flow justify-content / align-items align-content


1》水平(主轴上)对齐方式:

justify-content:flex-start | flex-end | center | space-between | space-around;

flex-start(默认值):左对齐

flex-end:右对齐

center: 居中

space-between:两端对齐,子元素间隔相等。

space-around:子元素两侧的间隔相等。

 

2》十字交叉轴上对齐方式

align-items:flex-start | flex-end | center | baseline | stretch;

flex-start:上对齐。

flex-end:下对齐。

center:交叉轴对齐。

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

stretch(默认值):如果子元素未设置高度或设为auto,将占满整个容器。

 

3》项目排列方向

flex-direction:row | row-reverse | column | column-reverse;

row(默认值):从左1/2/3/...。

row-reverse:从左../3/2/1。

column:从上1/2/3/...。

column-reverse:从上../3/2/1。

 

4》换行方式

flex-wrap:nowrap(不换行) | wrap(向下换) | wrap-reverse(向上换);

5》flex-flow

flex-direction和flex-wrap的简写

flex-flow:row nowrap

 

6》多根轴线的对齐方式

align-content:flex-start | flex-end | center | space-between | space-around | stretch;

flex-start:上对齐。

flex-end:下对齐。

center:居中对齐。

space-between:两端对齐,间隔平均。

space-around:间隔相等。

stretch(默认值):占满。

2)Flex布局子元素属性

order/flex-grow/flex-shrink/flex-basis/flex/align-self

1》order属性(num)

order定义自身排列顺序。数值越小,越靠前,默认为0。-1/0/1/2/3/...

2》flex-grow属性(num)

flex-grow 定义自身放大比例,默认为0不放大。例如:1/2/1=25%:50%:25%

3》flex-shrink属性(num)

flex-shrink定义了空间不足时自身缩小比例,默认为1自动缩小,0不缩小。

4》flex-basis属性

flex-basis定义最小空间,默认值为auto,即自身的本来大小。

5》flex属性

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

6》align-self属性

align-self定义自身对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

3)Flex兼容性

//Webkit内核的浏览器,必须加上-webkit前缀。
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}


版权声明:本文为博主原创文章,转载请注明出处。

Flex布局 Flexbox属性详解

Flex布局官方称为CSS Flexble Box 布局模型是CSS3为了提高元素在容器中的对齐、方向、顺序,甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同...

细说css3 flex布局之flex容器属性

flex是flexible box的缩写,意为弹性布局。用来为盒模型提供最大的灵活性。任何一个容器都可以通过设置display为flex或inline-flex将其指定为flex布局。设置flex布局...

关于flex,好像有12个属性很重要

关于Flex,有12个属性很重要这几天在学习Flex布局,发现Flex真的好厉害!Flex是Flexible Box的缩写,意为“弹性布局”,用来为盒模型提供最大的灵活性。Flex是它可以简单、完整、...

flex属性取值

第一种情况flex属性不写 flex属性默认是0 1 auto flex-grow为0,则存在剩余空间也不放大 flex-shrink为1,则空间不足该项目缩小 flex-ba...

Flex布局,常用的几个属性值;

任何东西都可以Flex布局; 包括行内元素: display:inline-flex; .box{ flex-wrap: nowrap | wrap | wrap-rever...

weex 可用样式,与唯一布局方式flex

Weex 布局模型基于 CSS Flexbox,Flexbox 是默认且唯一的布局模型,所以你不需要手动为元素添加 display: flex; 属性。 对于刚开始接触 weex想把它当html...
  • jayhkw
  • jayhkw
  • 2017年01月12日 17:30
  • 5969

Flex 4 设置背景图片 Canvas backgroundImage BitmapFill fillMode

Flex 3中Canvas是可以设置backgroundImage的,但是在Flex 4的Spark组件中则不支持backgroundImage属性的设置,怎么办呢?方法当然很多:可以考虑用s:G...
  • sws9999
  • sws9999
  • 2011年04月04日 10:59
  • 6507

数据结构与算法——给定整数A1,A2,....An,....(可能有负数),求该数据序列的最大子序列的和

求最大的子序列和问题

Ajax异步&同步请求

一、简介 Ajax请求最重要的问题是代码执行的顺序。最长遇到的问题是,我们定义一个变量接收ajax异步请求的返回结果,后续代码使用,然而后续代码在使用时该变量为初始值,始终得不到想要的结果!!! 二...

android 布局属性大总结

  • 2012年07月19日 20:04
  • 260KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Flex布局属性总结
举报原因:
原因补充:

(最多只允许输入30个字)