css弹性盒布局

孙景荣

已于 2023-01-29 12:09:27 修改

阅读量1.2k

点赞数

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

于 2022-10-01 19:54:54 首次发布

本文链接：https://blog.csdn.net/ssjjrr/article/details/127130583

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

一、弹性盒概念
二、添加在父级元素上的属性
三、添加在子级元素上的属性
四、flex为1的情况
五、移动端示例

一、弹性盒概念

display: flex

1.给父级元素添加形成弹性盒，控制子级在父级元素上的方向
2.父级元素形成弹性盒，默认主轴方向X轴，所有的子级元素沿着X轴排列
3.在弹性盒的环境下，不考虑元素类型，子级元素可以设置宽高大小
4.浮动属性float在弹性盒中不可以用

二、添加在父级元素上的属性

1.改变主轴方向 flex-direction，属性值如下
row 默认X轴
column 改变主轴为Y轴

2.主轴上的对齐方式 justify-content，属性值如下
flex-start/end 主轴的开始位置显示默认值
center 居中
space-between 两端对齐其余空间自动分配
space-around 所有的空间自动分配相邻的间距是开始最后的两倍
space-evenly 所有的空间自动分配元素左右间距是相同的

3.侧轴上的对齐方式 align-items，属性值如下
flex-start/end 开始/结束
center 居中

4.换行属性:flex-wrap，属性值如下
nowrap 不换行默认值
wrap 换行

5.行与行之间的间距 align-content，属性值如下
flex-start 行与行之间没有间距默认在最开始的位置显示
flex-end 行与行之间没有间距默认在结束的位置显示
center 居中
space-between 两端对齐其余空间自动分配
space-around 所有的空间自动分配相邻的间距是开始最后的两倍
space-evenly 所有的空间自动分配元素左右间距是相同的

三、添加在子级元素上的属性

1.侧轴的对齐方式 align-self，属性值如下
flex-start/end
center
auto
自动继承了父级的对齐方式如果父级设置可侧轴对齐 auto效果和父级一样
如果当前元素没有设置高度默认是和stretch效果一样表示拉伸

2.order (定位中的z-index)
弹性盒环境下使用
属性值是数字类型数字越大越往后排列

四、flex为1的情况

flex: 数字
常用为1，占据主轴上剩下空间，当内容过多的时候会将盒子撑大
2 3 4… 份数

五、移动端示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
      }
      body {
        display: flex;
        flex-direction: column;
      }
      header {
        height: 100px;
        background: pink;
      }
      main {
        flex: 1;
        background: skyblue;
        overflow: auto;
      }
      footer {
        height: 50px;
        background: red;
      }
    </style>
  </head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  </body>
</html>

在这里插入图片描述