display: flex自我理解

display: flex意思是弹性布局，弹性布局简直不要太好用，今天就来和大家具体讲讲它的属性和用法吧。

flex的属性（以下五个属性语法都是加在父元素身上的。）
一 1. flex-direction: row; 布局的排列方向（主轴排列方向）
row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
row-reverse 显示为行。但方向和row属性值是反的，在水平方向上为从右往左。
column 显示为列方向为在垂直方向上从上到下
column-reverse 显示为列。但方向和column属性值是反的
2. flex-wrap : nowrap; 是否进行换行处理。此语法是加在父元素身上的。
nowrap; 默认值，不换行处理
wrap; 换行处理
wrap-reverse; 反向换行
flex-flow : flex-direction flex-wrap 复合写法 (是有顺序的，顺序一定不能乱)。
3. justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。
flex-start ：子项都去起始位置对齐。
flex-end ：子项都去结束位置对齐。
center ：子项都去中心位置对齐。
space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只
有中间空白宽度一半。
space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
4.align-items : 每一行中的子元素上下对齐方式。
flex-start; 顶部对齐
center; 居中对齐
flex-end; 底部对齐
5.align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)
默认：多行下，有几行就会把容器划分为几部分，默认就是stretch拉伸的。
值跟justify-content取值是相同的。
## flex的注意事项
注：1.默认情况下，在弹性盒子中的子元素的左右排列的。
2. 水平是主轴的时候：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器决定。
3. 垂直是主轴的时候：默认情况下，当宽高不写的时候，宽度由父容器决定，高度由内容决定。
4. 当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）
5.当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。
6.弹性布局中用的频率比较多的语法：
display : flex;
flex-direction; 等于 row|row-reverse|column|column-reverse|initial|inherit;

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

/* 对齐方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;   /* 从行首开始排列 */
justify-content: end;   /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;     /* 一个挨一个在对齐容器得左边缘 */
justify-content: right;   /* 元素以容器右边缘为基准，一个挨着一个对齐, */

/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* 分配弹性元素方式 */
justify-content: space-between;  /* 均匀排列每个元素
首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
每个元素周围分配相同的空间 */
justify-content: space-evenly;  /* 均匀排列每个元素
每个元素之间的间隔相等 */
justify-content: stretch;     /* 均匀排列每个元素
'auto'-sized 的元素会被拉伸以适应容器的大小 */

/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;

/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

flex-start	默认值。从行首起始位置开始排列。	测试 »
flex-end	从行尾位置开始排列。	测试 »
center	居中排列。	测试 »
space-between	均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。	测试 »
space-evenly	均匀排列每个元素，每个元素之间的间隔相等。	测试 »
space-around	均匀排列每个元素，每个元素周围分配相同的空间。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

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

display: flex自我理解相关推荐

html+css:display:flex属性
博客 </a></li><li class="" title="高价值源码课程分享"><a data-report-c ...
弹性布局（display:flex;）属性详解
一.Flex布局-前言 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,旨在提供一个更有效地布局.对齐方式,并且能够使容器中的子元素大小 ...
display: flex text-align align-items justify-content 居中测试过程
display: flex text-align align-items justify-content 居中测试过程刚刚接触HTML CSS,想记录一下我自学中遇到的很小白的问题. 此次练习的目的 ...
关于OpenGL ES 3D 光晕如何产生的自我理解
2019独角兽企业重金招聘Python工程师标准>>> 星空图的自我理解:可以看作一个透明的半径很大的天球,然后在其表面上绘制大小不一的点,这样便可以够成星空图. 如何产生光晕的自我 ...
关于渗透的一些思路持续更新（自我理解）
关于渗透的一些思路持续更新(自我理解) 先回忆一下准确的是17年才接触到渗透以及ddos 其他hei产东西就不介绍了接触的自我感觉有点迟从最开始我也是从阿D明小子那些很傻瓜化的软件走过来的但是 ...
swift瀑布流实现_CSS 实现瀑布流布局（display: flex）
作者 | chokcoco 本例使用 CSS flex 实现瀑布流布局. 关键点,横向 flex 布局嵌套多列纵向 flex 布局,使用了 vw 进行自适应缩放. 代码如下: HTML: // pug ...
css不换行属性_前端 | css display:flex 的六个属性你知道吗
前言:display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持. ...
display:flex 多栏多列布局
转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...
前端布局神器display:flex
2009年,W3C提出了一种新的方案--Flex布局,可以简便.完整.响应式地实现各种页面布局.目前已得到所有现在浏览器的支持. flex浏览器支持一.Flex布局是什么? Flex是Flexibl ...
CSS3 -- display:flex
弹性盒子零. 父元素为display: flex;孙元素不受影响:所以想让子元素不受父元素影响,在子元素上套一层,让子元素变成孙元素一.容器的属性(6) display. flex-directi ...

display: flex自我理解

display: flex自我理解相关推荐

最新文章

热门文章