flex学习分享心得（一）

下蛋的鹅

已于 2022-06-20 10:17:36 修改

阅读量311

点赞数

分类专栏： html+css 文章标签：学习 css css3

于 2022-05-30 20:27:25 首次发布

本文链接：https://blog.csdn.net/qq_43184101/article/details/125048096

版权

本文分享了关于Flex布局的学习心得，主要围绕主轴、交叉轴、父容器和子容器展开。详细解释了主轴的默认方向、如何改变主轴方向，以及交叉轴的排列方式。此外，还探讨了父容器的换行设置和子容器在纵轴上的控制方法，如`justify-content`、`align-items`、`align-self`和`flex`属性的运用。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

flex盒子的属性

前言
- `提示：这里可以添加本文要记录的大概内容：` 我们主要分为四个方面，主轴，交叉轴父容器子容器
一、主轴是什么？
总结

前言

`提示：这里可以添加本文要记录的大概内容：`
我们主要分为四个方面，主轴，交叉轴父容器子容器

在这里插入图片描述
提示：以下是本篇文章正文内容，下面案例可供参考

flex意思是flex-box，是一个一维空间布局。
文章采用了flex-box区域的都叫做flex容器。设置display:flex后容器后的元素元素会变成flex的元素
元素会css的初始值：flex-direction:row; 默认值：row; flex-wrap:nowrap; 元素从主轴的起始线开始。
如何去理解主轴和交叉轴？父容器和子容器这？。理解了这几个概念后练习flex会更为顺手

一、主轴是什么？

主轴就是我们排列方式是在主轴是横向还是纵向的呢
一般主轴默认是row横向的
在这里插入图片描述

#text {
     
            display: flex;
            width: 300px;
            height: 300px;
            background-color: blue;
            margin: 0 auto;
            /* 1设置默认的主轴  一般默认的是row*/
            /* flex-direction: column; */
        }

        .text1 {
   
            width: 60px;
            height: 60px;
            background-color