[css][移动web]flex布局中主轴转换，弹性盒子换行和侧轴对齐方式

flex-修改主轴方向，弹性盒子换行与调节行对齐方式。flex-direction改变元素排列方向，要注意主轴方向修改侧轴也会随之变化，两轴始终相互垂直。子元素宽度发生了改变，使其宽度总和等于父元素，子元素会被压缩或者拉伸，所以才叫弹性盒子。在上面的例子我们看到了换行后自动给出了均匀的间隙，要修改就得调节行对其方式。在flex盒子中主轴方向默认是水平方向，侧轴默认是垂直方向

布局类型语法组合水平居中垂直居中完全居中水平两端对齐垂直排列支持换行。

多行侧轴垂直排列 ,中间按照1比1划分。多行侧轴垂直排列 ,中间按照1比2划分。主轴两边靠边,中间自适应。flex默认的主轴是水平方向上的。2.flex(弹性盒子)强制换行。侧轴两边靠边,中间自适应。多行侧轴垂直排列 ,中间对齐。侧轴从最后一个开始排列。侧抽为垂直方向上的y轴.侧轴从第一个开始排列。默认方向值为 row。

css flex justify-content属性，子元素在主轴上的对齐方式。justify-content属性控制子元素在主轴上的对齐方式,支持flex-start 、 flex-end 、 center 、 space-between 、 space-around对齐方式。justify-content属性可选值说明flex-start默认值，向主轴start位置对齐，当flex-direc...

flex布局中主轴转换

在Flexbox中，换行和排序是非常实用的功能，可以用来控制容器内元素的排列方式。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过上述示例和技术要点，您应该能够熟练地使用Flexbox来实现各种复杂的布局，并在实际项目中灵活应用这些知识。Flexbox可以用来创建复杂的网格布局，其中包含多个行和列，以及不同大小的单元格。在实际项目中，可能会遇到更复杂的布局需求，例如嵌套的Flex容器、多列布局等。属性，可以控制Flex项目在容器中的排序顺序。

更改flex布局下的主侧轴和弹性盒子换行

物理分辨率：硬件所支持的，屏幕出厂就设定无法修改逻辑分辨率：软件可以达到的， 我们开发中写的是逻辑分辨率视口（viewport）就是浏览器显示页面内容的屏幕区域。

Flex布局模型中，弹性盒子默认沿着主轴方向排列，默认的主轴方向为横向也就是水平排列，但如果要使用Flex布局模型使弹性盒子沿着竖直方向排列，就需要更改Flex布局的主轴方向。主轴方向发生改变，对齐方式也会有所不同。

.box{display:flex;} flex的6个属性: flex-direction　　容器内项目的排列方向(默认横向排列)　　 flex-wrap　　容器内项目换行方式 flex-flow　　以上两个属性的简写方式 justify-content　　项目在主轴上的对齐方式 align-items　　项目在交叉轴上如何对齐 align-content　　定义了多根轴线的对齐方...

弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。

弹性盒子没有固定大小，弹性盒子就是内容大小，添加stretch取值会被拉伸 */space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间。space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧。space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等。/* 结论: Flex布局中,弹性盒子会在弹性容器中被拉伸或者被挤压。在stretch效果中,弹性盒子会沿着侧轴被拉伸直到充满整个盒子。弹性盒子有固定的大小，盒子该多大，就是多大。

部分图来自pink老师教程及蓝桥云课教程，侵权删