flex布局，属性用法

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

display

指定 HTML 元素盒子类型

使用flex布局，必须将display属性设置为flex (display:flex)

flex-direction

指定了弹性容器中子元素的排列方式,属性值：

row	默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	灵活的项目将垂直显示，正如一个列一样。
column-reverse	与 column 相同，但是以相反的顺序。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

justify-content

设置弹性盒子元素在主轴（横轴）方向上的对齐方式，属性：

flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器的中心。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

align-items

设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

stretch	默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
center	元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start	元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
baseline	元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

flex-wrap

设置弹性盒子的子元素超出父容器时是否换行，属性：

nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

align-content

修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐，属性：

stretch	默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
center	元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
flex-start	元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
flex-end	元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
space-between	元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
space-around	元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

flex-flow

flex-direction 和 flex-wrap 的简写

flex-direction	可能的值： row row-reverse column column-reverse initial inherit 默认值是 "row"。规定灵活项目的方向。
flex-wrap	可能的值： nowrap wrap wrap-reverse initial inherit 默认值是 "nowrap"。规定灵活项目是否拆行或拆列。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

order

设置弹性盒子的子元素排列顺序。

number	默认值是 0。规定灵活项目的顺序。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

align-self

在弹性子元素上使用。覆盖容器的 align-items 属性

auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
stretch	元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
center	元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start	元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
baseline	元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

flex

设置弹性盒子的子元素如何分配空间。

flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。
inherit	从父元素继承该属性。

转载于:https://www.cnblogs.com/momen/p/9398321.html

flex布局，属性用法相关推荐

html布局属性,hTML之FLEX布局属性
HTML之flex布局 flex布局是什么 flex布局,中文意思为弹性布局,用来为盒模型提供最大的支持,如果靠简单的float,position,很难将页面做的好看.flex灵活性非常的好,任何一个 ...
关于Flex布局属性详解
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ disp ...
flex布局属性的伸展、收缩、基准属性
flex-frow 伸展解决问题:当所要求的范围超出后,如何分配空间? 在分配的内容大于需要的空间后,要对剩余的空间进行分配可以设置1,以及其他数字,不能是负数 1.如果每一个子集设置的是相同的数 ...
彻底弄懂flex布局
目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也 ...
CSS flex布局
1. 介绍 1.1 说明 flex布局,也称为flex弹性布局:主要目的是使item的宽度.高度按一定顺序填充父容器的可用空间. 示例注意:在下文中,将以parent指代父容器,item指代容器内的 ...
30分钟彻底弄懂flex布局
目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也 ...
微信小程序（safair浏览器）flex布局中的坑
今天在用微信小程序做flex布局的时候遇到了一些问题. 布局简单来说是这样的,最外层是一个flex布局属性为flex-direction:column的元素.里面有未设置height,并且flex-g ...
CSS布局篇——flex布局
1.flex布局布局的传统解决方案,基于盒模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3 ...
css布局-浮动、定位、flex布局
1.CSS布局 - 什么是网页的布局方式? 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 - 标准流(文档流/普通流)排版方式标准流(文档流/普通流) -标准流(文档流/ ...