关于media的媒体查询，详见 https://github.com/DF11G/CSS_Practice.git

Flex的属性：

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

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

.box{display: flex;
}

一、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

二、容器的属性

flex-direction：决定主轴的方向（即项目的排列方向）。

它可能有4个值。

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap：定义如果一条轴线排不下，如何换行。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

flex-flow：是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`。

justify-content：定义了项目在主轴上的对齐方式。

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items：定义项目在交叉轴上如何对齐。

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

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

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

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

CSS flex的一些属性相关推荐

css flex布局 —— 容器属性 flex-wrap
flex-wrap属性默认情况下,项目都排在一条线(又称"轴线")上.flex-wrap属性定义,如果一条轴线排不下,如何换行. 语法 .box{flex-wrap: nowra ...
css flex布局 —— 容器属性 align-items
align-items 属性定义项目在交叉轴上如何对齐. 语法: .box {align-items: flex-start | flex-end | center | baseline | stre ...
css flex布局 —— 项目属性 flex-grow
flex-grow 属性定义项目的放大比例,解决的问题是:在空间有多余时把多余空间分配给各个子元素. flex-grow 的值默认为 0,也就是说,如果存在剩余空间,也不放大. flex-grow 取 ...
css flex属性学习笔记
参考文献 flex: 1 0calc((100% / min(var(--cx-active-view), var(--cx-max-views))) -var(--cx-split-gutter)) ...
css flex布局模型（CSS justify-content 属性） - 代码案例
css flex布局模型(CSS justify-content 属性) - 代码案例效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...
css flex 文字右对齐,css flex align-items属性交叉轴上对齐方式垂直对齐方式
css flex align-items属性交叉轴上对齐方式垂直对齐方式 css flex align-items属性子元素在交叉轴上对齐方式,如果不好理解,可以把flex-direction设置为 ...
css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
CSS flex布局
1. 介绍 1.1 说明 flex布局,也称为flex弹性布局:主要目的是使item的宽度.高度按一定顺序填充父容器的可用空间. 示例注意:在下文中,将以parent指代父容器,item指代容器内的 ...
html实现左图右文_让CSS flex布局最后一行左对齐的N种方法
作者:张鑫旭 https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 前言小伙伴们是否还记得,之前小编也发布了几篇关于CS ...

CSS flex的一些属性

Flex的属性：

一、基本概念

二、容器的属性

flex-direction：决定主轴的方向（即项目的排列方向）。

flex-wrap：定义如果一条轴线排不下，如何换行。

flex-flow：是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`。

justify-content：定义了项目在主轴上的对齐方式。

align-items：定义项目在交叉轴上如何对齐。

align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

CSS flex的一些属性相关推荐

最新文章

热门文章

CSS flex的一些属性

Flex的属性：

一、基本概念

二、容器的属性

flex-direction：决定主轴的方向（即项目的排列方向）。

flex-wrap：定义如果一条轴线排不下，如何换行。

flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content：定义了项目在主轴上的对齐方式。

align-items：定义项目在交叉轴上如何对齐。

align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

CSS flex的一些属性相关推荐

最新文章

热门文章

flex-flow：是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`。