弹性盒子flex轴的说明

弹性盒子flex中，有两种轴一种是主轴，一种是交叉轴（侧轴）。
flex默认轴布局是这样的：

flex-direction 是决定主轴的方向

row 从左到右水平排列元素（默认值）如上图

row-reverse 从右向左排列元素

column 从上到下垂直排列元素

column-reverse 从下到上垂直排列元素

justify-content 定义项目在主轴的对齐方向.

flex-start   元素紧靠主轴起点
flex-end    元素紧靠主轴终点
center  元素从弹性容器中心开始
space-between   第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间
space-around    每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-evenly    元素间距离平均分配

align-items用于控制容器元素在交叉轴上的排列方式。

stretch  元素被拉伸以适应容器（默认值）
center  元素位于容器的中心
flex-start  元素位于容器的交叉轴开头
flex-end    元素位于容器的交叉轴结尾

flex项目垂直居中：

这时候主轴为垂直方向，所以它是垂直居中

当flex-direction:column 和column-reverse时，你的主轴与交叉轴就会互换。所以主轴与交叉轴不是固定的，而是由flex-direction决定的。
为column-reverse方向改变

所以flex主轴和交叉轴（侧轴）的位置和方向根据flex-direction的不同而不同，并由此导致了justify-content和align-items的位置变化。只要明白了这里flex布局就很容易明白了

弹性盒子flex轴的说明相关推荐

css 弹性盒子 flex布局
目录 css弹性盒子flex 布局什么是flex 常见父项属性概念与案例主轴与侧轴 flex-direction设置主轴的方向 justify-content 设置主轴上的子元素排列方式 fle ...
html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
简述弹性盒子flex布局及rem布局
简述弹性盒子flex布局及rem布局 flex布局方式采用flex布局的元素,成为flex为容器,所有的子元素,都包含在容器内,容器存在两个默认的轴水平主轴主轴的开始位置(与边框的交叉点)叫做m ...
CSS3 弹性盒子(Flex Box)
目录 CSS3 弹性盒子(Flex Box) 一.什么是 Flexbox >>> 了解两个基本概念,接下来会频繁提到: >>> 了解两个基本方向,这个牵扯到弹性布局 ...
认识弹性盒子flex
认识弹性盒子flex 来源:https://blog.xybin.top/2022/flex 1.定义弹性布局(父级上定义)display:flex; 如果说内核为webkit 的必须前面加上 -we ...
CSS3弹性盒子Flex
CSS3弹性盒子Flex 基础知识和术语原文链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 父级(flex容器)的属性 #显示 ...
弹性盒子flex布局实现骰子六个面并让骰子3D空间旋转
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
弹性盒子 Flex 子元素高度塌陷
弹性盒子 Flex 子元素高度塌陷数据来源:https://blog.csdn.net/sinat_36539161/article/details/81663971 先看看页面整体布局: · wr ...
ul弹性怎么一行显示_css3系列之弹性盒子 flex
作者:杨耿 https://www.cnblogs.com/yanggeng/p/11212526.html 弹性盒子(伸缩盒) 注意,本篇会很长,非常长, 因为弹性盒子的知识点比较多搜索弹性盒子 ...

弹性盒子flex轴的说明

弹性盒子flex轴的说明相关推荐

最新文章

热门文章