Flex常见布局详解(图文案例,开发常用)

最新推荐文章于 2024-06-30 11:44:57 发布

努力的小谢～

最新推荐文章于 2024-06-30 11:44:57 发布

阅读量824

点赞数 19

分类专栏：前端文章标签： css 前端 javascript html

本文链接：https://blog.csdn.net/qq_53915616/article/details/139514686

版权

1 篇文章 0 订阅

订阅专栏

1.flex布局概念

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。 display: flex;

flex-direction 属性决定主轴的方向(即子元素的排列方向)
注意:主轴和侧轴是会变化的，就看flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
flex-direction属性值：

效果1.flex-direction：row-从左到右
在这里插入图片描述

效果2.flex-direction：row-reverse-从右到左
在这里插入图片描述

效果3.flex-direction：column-从上到下
在这里插入图片描述

效果4.flex-direction：column-reverse-从下到上

在这里插入图片描述

父盒子(设置了flex布局，主轴为row -->x轴)宽度300px情况下,子盒子宽度90px。flex-wrap默认是nowrap,不换行。
默认的子无素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面。比如有六个子盒子，情况如下：

子盒子的宽度被缩小了。不是90px。
如果设置了flex-wrap: wrap;换行，情况如下:

在这里插入图片描述

该属性是控制子项在侧轴(默认是y轴)上的排列方式在子项为单项(单行)的时候使用
单行情况下:

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(行)，在单行下是没有效果的。
多行情况下：
在这里插入图片描述