Flex和Grid的学习

最新推荐文章于 2025-04-27 13:27:17 发布

2401_88560642

最新推荐文章于 2025-04-27 13:27:17 发布

阅读量1k

点赞数 19

文章标签：学习前端 javascript

本文链接：https://blog.youkuaiyun.com/2401_88560642/article/details/145229788

版权

一.Flex布局

1.flex布局基础

（1）. flex 布局含义 : flex 布局 , 也被称之为弹性盒子布局 , 是 CSS3 里面新增的一种布局方式 , 通过使用 flex 布局 , 我们可以让布局更加便捷高效。

（2）如何触发弹性盒子 :给父元素添加 display 属性 , 并且将取值设置成 :flex

.nav{
display : flex;
}

3. 触发弹性盒子有哪些特点 ?

1 子元素默认横向显示。

2子元素会默认变成块级元素 , 能设置宽度高度。

3 如果只有一个子元素的话 , 则给子元素添加 margin:auto 的时候
会让子元素直接实现水平垂直居中显示。

2.flex布局中的基本概念

flex容器：采用Flex布局的元素的父元素。

flex 项目：采用 flex 布局容器里面的子元素；

横轴 ( 水平轴 ): 水平方向轴线
纵轴 ( 垂直轴 ): 垂直方向轴线

主轴 : 触发弹性盒子之后 , 项目的排列方向。
侧轴 ( 交叉轴 ): 触发弹性盒子之后 , 与主轴对立的方向。

3.flex中的容器布局属性

1.触发弹性盒子

在默认情况下项目都是纵向排列（原因：项目是块级元素，块级本质就是纵向排列）

*{
            padding: 0px;margin: 0px;
        }
        .box{
            width: 500px;
            height: 500px;
            border: 10px solid red;
            margin: 100px auto;
        }
        .box>div{
            width: 100px;
            height: 100px;
            border: 2px dashed orange; 


        }

添加 display:flex; （给容器（父元素）触发弹性盒子）属性后变横向 (默认横向显示)

2.修改主轴方向

给容器（父元素）触发弹性盒子（默认主轴在横向）display：flex；

修改主轴方向：flex-direction属性取值：column-reverse的时候，主轴在纵向，项目反方向显示（column垂直，reserve反向）

对于属性：flex-direction

row=========主轴在横向，以开始位置显示（*）

row-reserve===主轴在横向，以相反方向位置显示

column=======主轴在纵向，以开始位置显示（*）

column-reserve=主轴在纵轴，以相反方向位置显示

基本格式为：

3.主轴对齐方式（调整间距）

给容器（父元素）触发弹性盒子（默认主轴在横向）display：flex；

需要justify-content属性来调整主轴上面的对其方式（间距）

对于属性：justify-content

flex-start 主轴的开始位置显示，默认值（项目之间没有间距）
flex-end 主轴的结束位置显示（项目之间没有间距）
center 主轴的居中位置显示（项目之间没有间距）
space-between 主轴的两端对齐（space间距 between两端）
space-around 主轴两端环绕（around环绕-项目左右都有距离）（项目与项目之间的距离是首尾项目与容器之间距离的2倍）
space-evenly 主轴的间距均分（evenly代表让间距均分，首元素或末尾元素都一样）