http://www.web008.net

Flexbox布局学习笔记,移动端开发小记

flex-basis

其生机勃勃本性,依然要有个别说一说的。那本性情是新版标准内部涉及的性质。它用来描述伸缩成分( flex-item )的上马主轴尺寸和基准值,也便是在依据伸缩比率总结剩余空间布满从前的尺寸值,假如在  flex 中归纳了这一个值,则暗中同意值是 0 , 专心未有单位 。它的另一个取值是  auto ,那个时候,成分的启幕主轴长度和基准值正是它自个儿的主轴长度,即在于自身的故事情节长度。

多个取值的界别如下图:

图片 1

看图更易于理解一些:值为 0 时,成分分配的是容器的上空。而当班值日为 auto 时,它分配的是减去成分内容之后剩余的容器空间。

在值为 auto 时,它的彰显跟老版 Flex 标准的伸缩比例展现是同等的,如若盒子内容大小不均等,则每种盒子最终分配的上空尺寸也不雷同。

由此,在管理这厮展览示非常时,要在要素上加一个  width: 0%;  来使其变现的常规。实际上, flex-basis: 0;  的一言一行正是为要素加上一个看似 width: 0%;  的特性,来分配容器空间。

Flexbox 这一个模块有数不完的习性,这里只介绍最宗旨的行使,更加多内容详见规范或者 Google。

Flexbox使用示例:

水平竖直居中:

<div class="parent"><div class="child"></div></div>

将 .parent 的 display 属性设置为 flex,将 .child 的 margin 设置为 auto。

在Flex容器中,当项目边距设置为 auto 时,设置自动的垂直边距使该品种完全居中多少个轴。

By the way

还会有三个实惠的 CSS 属性,在移动端已经基本支持了,正是 box-sizing: border-box;。它在利用 padding 时丰富有用,能够幸免 width ,padding 的总计。能够如此子用:

LESS

.box-sizing(@v) { -webkit-box-sizing: @v; -moz-box-sizing: @v; box-sizing: @v; }

1
2
3
4
5
.box-sizing(@v) {
  -webkit-box-sizing: @v;
  -moz-box-sizing: @v;
  box-sizing: @v;
}

可是,要静心,在这里种盒模型下,边框的宽度也会算在步长里。

1 赞 6 收藏 评论

图片 2

Flexbox属性:

1. dispaly(flex container)

display: other values | flex | inline-flex;

2. flex-direction(flex container)

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

根本用以创设主轴,从而定义伸缩项目放置在伸缩容器的主旋律。

图片 3

Flex-direction

3. order(flex items)

暗中认可景况下,伸缩项目是遵从文书档案流现身前后相继顺序排列。而"order"属性能够决定伸缩项目在其伸缩容器中冒出的生龙活虎大器晚成。

order: <integer>

4.flex-wrap(flex container)

要害用以定义伸缩容器里是单行如故多行彰显,侧轴的大势决定了新行积聚的大势。

flex-wrap: nowrap | wrap | wrap-reverse

nowrap(私下认可值):伸缩容器单行显示。

wrap:伸缩容器多行展现。

wrap-reverse:伸缩容器多行突显,方向与wrap相反。

5.flex-flow(flex container)

flex-direction 和 flex-wrap 属性的缩写版本。

6.justify-content(flex container):

概念伸缩项目沿着主轴线的对齐形式。当意气风发行上的装有伸缩项目都无法伸缩,也许可伸缩不过已经达到最大尺寸时,那意气风发性情才会对剩余的空中拓宽分配。当项目溢出某意气风发行时,该属性也会在档案的次序的对齐上强加一些说了算。

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

图片 4

justify-content

7. align-content(flex container)

用来调准伸缩行在伸缩容器里的对齐格局。

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

图片 5

align-content

8. align-items(flex container)

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

图片 6

align-items

9. align-self(flex items)

用来在独立的伸缩项目上覆写暗中同意的对齐格局。

align-self: auto | flex-start| flex-end| center | baseline | stretch;

图片 7

align-self

10. flex-grow(flex items)

基于供给来定义伸缩项目标扩大技能。采纳叁个不带单位的值作为贰个比例。

主要用来决定伸缩容器剩余空间按比例应该扩充多少空间。

flex-grow: <number>;  /* 默认为0 */

设若具备伸缩项目该属性设置了1,那么各种项目就安装为多个尺寸相等的多余空间;假如给内部二个伸缩项目安装为2,那么那几个类型所占的盈余空间是其余门类所占剩余空间的2倍。

图片 8

flex-grow

11. flex-shrink(flex items)

依附必要来定义伸缩项目减少的力量。

12. flex-basis(flex items)

用来安装伸缩基准值,剩余的空中按百分比举行伸缩。

13. flex(flex items)

flex-grow、flex-shrink 和 flex-basis 3脾特性的缩写。

-

移动端支付小记 – Flexbox

2015/11/12 · CSS · Flexbox

原版的书文出处: Taobao前端团队(FED)- 凌恒   

图片 9

在开荒移动端页面包车型大巴时候,出去布局方便和减少代码量的思虑,使用了 Flexbox 的布局方式,在内部也蒙受了有的问题,简单记录下。

W3C解释:

In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shriking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

flexbox的现身是为领悟决复杂的web布局,因为这种构造格局很灵敏。容器的子成分能够轻巧方向拓宽排列。

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。