移动端布局-flex布局

最新推荐文章于 2024-04-11 16:30:18 发布

糕手z

最新推荐文章于 2024-04-11 16:30:18 发布

阅读量530

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_49455047/article/details/121690953

版权

3.2flex-direction 设置主轴的方向

1.主轴与侧轴

2.属性值

3.3justify-content设置主轴上的子元素排列方式

flex-direction：row的情况：

flex-direction：column的情况

3.4flex-wrap设置子元素是否换行

3.5align-items设置侧轴上的子元素排列方式（单行）

3.6align-content设置侧轴上的子元素的排列方式（多行）

3.7align-content和align-items区别

3.8flex-flow

四.flex布局子项常见属性

4.1flex属性

4.2align-self控制子项自己在侧轴上的排列方式

一.flex布局体验

1.1传统布局与flex布局

建议：

如果是PC端页面布局，我们还是传统布局
如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

1.2初体验

1.搭建HTML结构

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

2.CSS样式

    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: orange;
            justify-content: space-around;
        }
        span {
            width: 150px;
            height: 100px;
            background-color: yellow;
            margin-right: 5px;
        }
    </style>

3.实现效果

span无需display即可指定宽度高度等

二.flex布局原理

flex是flexible box的缩写，意为“弹性布局”，用来为盒状模型提供最大灵活性，任何一个容器都可指定为flex布局

当我们为父元素设置flex布局以后，子元素的float（不需要浮动），clear（不需要清除浮动）和vertical-align（flex可以实现盒子垂直居中）属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素，称为flex容器（flex container），简称“容器”。他的所有子元素自动成为容器成员，称为flex项目（flex item）简称“项目”

总结flex布局原理：

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

三.flex布局父项常见属性

3.1常见父项属性

以下有6个属性是对父元素设置的

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

3.2flex-direction 设置主轴的方向

1.主轴与侧轴

在flex布局中，是分为主轴和侧轴两个方向的，同样的叫法有：行和列、x轴和y轴

默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下

2.属性值

flex-direction属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素是按主轴来排列的

    <style>
      div {
        /* 给父级添加flex */
        display: flex;
        width: 80%;
        height: 300px;
        background-color: orange;
        /* 默认主轴是x轴 行 row  那么y轴就是侧轴了*/
        /* 元素是跟着主轴来排列的 */
        /* flex-direction: row; */
        /* 简单了解  reverse翻转 */
        /* flex-direction: row-reverse; */
        /* 我们可以把主轴设为y轴，那么x轴就成了侧轴 */
        flex-direction: column;
      }
      span {
        width: 150px;
        height: 100px;
        background-color: yellow;
      }
    </style>

  <body>
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </body>

3.3justify-content设置主轴上的子元素排列方式

justify-content属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定好主轴是哪个

flex-direction：row的情况：

    <style>
      div {
        display: flex;
        width: 80%;
        height: 300px;
        background-color: orange;
        /* 默认属性justify-content: flex-start; */
        /* 在主轴上居中对齐（如果主轴是x轴则水平居中） */
        /* justify-content: center; */
        /* 除去盒子所占空间，平分剩余空间 */
        /* justify-content: space-around; */
        /* 先两边贴边，在平分剩余空间 */
        justify-content: space-between;
      }
      span {
        width: 150px;
        heigh

最低0.47元/天解锁文章

糕手z

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端布局-flex布局

一.flex布局体验1.1传统布局与flex布局建议：如果是PC端页面布局，我们还是传统布局如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局 1.2初体验1.搭建HTML结构<body> <div> .
复制链接

扫一扫