CSS || flex笔记

huhud 发布于2019-08-29 12:16 / 1940人阅读

摘要：五个取值与主轴方向有关默认值左对齐右对齐居中两端对其，间的间隔距离相等每个两侧的间隔相等，相当于设置左右值相等。默认值为即使存在剩余空间宽度，也不放大。默认值为，表示本来的大小。

Flex布局

Flex是flexible box的简称，纯粹用来布局的属性

1 flex和inline-flex

任何容器都可以知道为Flex布局，块级元素使用display: flex; ；行内元素使用inline-flex

容器使用Flex布局后，子元素的float、clear和verticle-align属性将失效

2 基本概念

采用Flex布局的元素，称为flex container容器。容器内的子元素自动成为flex container的成员，称为flex-item

flex-item的排列方向是main axis：即flex-direction指定主轴是水平或是垂直

容器默认存在水平主轴main axis和垂直的交叉轴cross axis

main axis：flex-item排列的方向是主轴

cross axis：与主轴垂直的是交叉轴

主轴的开始和结束位置：main start和main end

交叉轴的开始和结束位置：cross start和cross end

flex-item在主轴与交叉轴占据的空间：main size和cross size

3 flex container的属性

需要在flex container上设置的属性有6个：

flex-direction：row | row-reverse | column | column-reverse。默认值为row

row（默认值）：主轴是水平方向，flex-item水平排列，main start在左端

row-reverse：主轴是水平方向，flex-item水平排列，main start在右端

column：主轴是垂直方向，flex-item垂直排列，main start在上边沿

column-reverse：主轴是垂直方向，flex-item垂直排列，main start在下边沿

flex-wrap：nowrap | wrap | wrap-reverse。默认情况下，flex-item都排在一条轴线上；flex-wrap属性定义如果在一条轴线上排不下，换行的规则。

nowrap（默认值）：不换行

wrap：换行，第一行排在上方

wrap-reverse：换行，第一行排在下方

flex-flow：是flex-direction和flex-wrap的简写，默认值为row nowrap

flex-flow: &&

justify-content：定义flex-item在主轴main-axis上的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around。五个取值与主轴方向有关

flex-start（默认值）：左对齐；flex-end右对齐；center居中；

space-between：两端对其，flex-item间的间隔距离相等

space-around：每个flex-item两侧的间隔相等，相当于设置左右margin值相等。

align-items：定义flex-item在交叉轴的对其方式

align-items: flex-start | flex-end | center | baseline | strecth。五个取值与交叉轴方向有关

flex-start交叉轴起点对其；

baseline：flex-item的第一行文字的基线对齐

stretch（默认值）：如果flex-item没有设置高度或者值为auto，将占满整个容器高度

align-content：如果容器内出现多跟轴线（即出现wrap），定义主轴在交叉轴上的对齐方式，只有一根轴线时不起作用

stretch（默认值）：轴线沾满整个交叉轴

space-between：与交叉轴两端对齐，轴线间的间隔平均分布

space-around：每根轴线两侧的间隔相等

flex-start：与交叉轴起点对其

4 flex-item的属性

在flex-item上设置的属性同样是6个：

order: ;：定义flex-item在主轴上的排列顺序。数值越小，排列越靠前，默认值为0。

flex-grow: ：定义flex-item在主轴上的放大比例。默认值为0：即使存在剩余空间（宽度），也不放大。

如果所有flex-item的flex-grow属性值都是1，表示它们均分剩余空间（如果有）

如果一个flex-item属性值为2，其余为1：前者占据的空间是后者的2倍

flex-shrink: ：定义flex-item在主轴上的缩小比例。默认值为1，即如果空间不足，该flex-item会缩小。

如果所有flex-item的flex-shrink属性值都为1，在空间不足时，都将等比例缩小

flex-shrink为0的flex-item在空间不足时，不会缩小。

flex-basis: | auto：定义在分配剩余空间前，flex-item占据主轴的空间main size。默认值为auto，表示flex-item本来的大小。

浏览器根据这个属性计算是否存在多余空间

如果width和height值固定为绝对长度单位（如350px），该flex-item占据固定空间

flex属性：是flex-grow、flex-shrink和flex-basis三个属性的简写，默认值为0 1 auto

两个快捷值：none表示(0 0 auto)；auto表示(1 1 auto)

建议优先使用属性值，而非先多带带写三个分离的属性（浏览器会自动推算相关值）

align-self：允许单个flex-item与其他flex-item在交叉轴有不同的对齐方式，可以覆盖掉align-items的值

默认值为auto：表示继承父元素的align-items属性

没有父元素情况下等同于stretch

阮一峰教程Flex布局教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111782.html

CSS页面布局笔记

摘要：居中布局水平居中父元素和子元素的宽度都未知优点兼容性好缺点子元素文本继承了属性，子元素要额外加优点只需要设置子元素的样式优点居中子元素不会对其他元素产生影响缺点是的属性，存在兼容性问题优点只需要设置父元素的样式缺点兼容性问居中布局水平居中父元素和子元素的宽度都未知 inline-block + text-ailgn .child{display:inline-block;} ...

CoderDock 2019-08-28 18:14 评论0 收藏0
HTML、CSS笔记

摘要：相邻的兄弟元素相邻的两个兄弟元素之间的外边距会塌陷。块级父元素与其第一个最后一个子元素如果块级父元素中，上边框宽度及上内边距距离为时，此时这个块级父元素和其第一个子元素就会发生上外边距合并现象。盒模型在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边与内容边。在标准模式下，一个块的总宽度=...

frank_fun 2019-08-01 18:29 评论0 收藏0
HTML、CSS笔记

摘要：相邻的兄弟元素相邻的两个兄弟元素之间的外边距会塌陷。块级父元素与其第一个最后一个子元素如果块级父元素中，上边框宽度及上内边距距离为时，此时这个块级父元素和其第一个子元素就会发生上外边距合并现象。盒模型在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边与内容边。在标准模式下，一个块的总宽度=...

Aomine 2019-08-29 14:22 评论0 收藏0
CSS Flexbox学习笔记

摘要：本文记录了我在学习前端上的笔记，方便以后的复习和巩固。注意项目现在显示的宽度是他们的默认宽度。各行将会伸展以占用剩余的空间。在其它情况下，剩余空间被所有行平分，扩大各行的侧轴尺寸。这不会影响源代码。不要忘记了，默认情况下，项目的值为。本文记录了我在学习前端上的笔记，方便以后的复习和巩固。开始使用Flex 在父元素中的显式的设置displa...

zzir 2019-08-29 12:21 评论0 收藏0
CSS 小结笔记之伸缩布局 (flex)

摘要：相关的各个属性如下在父盒子定义，子盒子才能使用属性设置子盒子的缩放比例，可以一起指定也可以单独指定。子盒子在父盒子中的水平对齐方式。强行在一行显示，因此每个盒子的大小都会减少。CSS flex 是一种伸缩布局，之前块级元素布局在同一行，可以通过display或position或float来实现，而本篇介绍一个新的方法——flex（弹性布局）。 flex 为和模型布局提...

番茄西红柿 2019-04-23 13:22 评论0 收藏0