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 布局

寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Wo...
  • Magneto7
  • Magneto7
  • 2017年04月27日 14:49
  • 34422

小程序开发必看!一篇文章让你了解 Flex 布局

第九程序注明: 要想开发小程序,每个人都需要先了解 Flex。小程序的开发框架使用了 Flex 排版布局,它能帮助开发者以最快的速度,构建美观而具有动态调整性质的小程序排版。...
  • qq_38125123
  • qq_38125123
  • 2017年04月19日 14:45
  • 1811

Flex 布局之详解

网页布局(layout)是CSS的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方...
  • Maxbyzhou
  • Maxbyzhou
  • 2017年04月01日 20:26
  • 804

flex布局完全入门教程

提纲 CSS介绍 盒子模型 什么是flexbox flex-direction flex-wrap flex-flow justify-content align-items align-conten...
  • liyuechun520
  • liyuechun520
  • 2017年07月15日 16:50
  • 880

Flex 布局教程:实例篇

上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主...
  • javaloveiphone
  • javaloveiphone
  • 2016年04月08日 10:48
  • 1664

flexbox 弹性盒布局和布局原理

flexbox 弹性盒布局和布局原理 最近开始做H5,发现flexbox用的超级广泛,找到了这么一篇文章,https://css-tricks.com/snippets/css/a-guide-to-...
  • lihongxun945
  • lihongxun945
  • 2015年05月03日 14:45
  • 20889

用Flex实现的百分比布局

弹性布局在移动端页面非常的有用,弹性布局主要利用的是CSS3的flex属性。 下面分享一个用flex来实现百分比布局的方法,这在移动端中是很常用的一种适配方法。 代码如下:          F...
  • Handsome_fan
  • Handsome_fan
  • 2017年04月16日 23:08
  • 3399

flex布局篇

flex布局
  • w2765006513
  • w2765006513
  • 2016年12月28日 14:35
  • 1004

Flex布局 Flexbox属性详解

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

微信小程序页面Flex布局

微信小程序页面布局方式采用的是Flex布局。 Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。 Flex布局提供了元素在容器中的对齐,方向以及顺序,...
  • qq_34281962
  • qq_34281962
  • 2016年10月03日 19:58
  • 12982
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Flex布局属性总结
举报原因:
原因补充:

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