CSS之(移动端)flex布局

·  阅读 659

了解视口

meta视口标签:

<meta name="viewport" content="width=device-width, 
                                    initial-scale=1.0,
                                    maximum-scale=1.0,
                                    minimum-sclae=1.0,
                                    user-scalable=no" >
复制代码
属性解释说明
width宽度设置的是viewport宽度,可以设置device-width特殊值
initial-scale初始缩放比,大于0的数字
maximum-scale最大缩放比,大于0的数字
minimum-scale最小缩放比,大于0的数字

在这里插入图片描述


弹性布局

      对于flex,PC端浏览器支持情况较差。IE11或更低版本,不支持或部分支持,不考虑兼容性问题的pc端页面布局可以使用flex

      任何一个容器都能指定为flex布局

      父盒子设置flex布局后,子元素的 float、clear、vertical-align 属性将失效

flex布局常见的属性

  • flex-direction —— 设置主轴方向
  • justify-content —— 设置主轴上的子元素排列方式
  • flex-wrap —— 设置子元素是否换行
  • align-content —— 设置侧轴上的子元素的排列方式(多行,有换行情况)
  • align-items —— 设置侧轴上的子元素的排列方式(单行)
  • flex-flow —— 复合属性,对于同时设置flex-direction和flex-wrap

flex-direction

设置主轴方向 默认主轴是x轴,水平向右。默认侧轴是y轴,垂直向下

flex-direction: row —— 设置主轴x轴,水平向右,子元素从左到右排列

flex-direction: row-reserve —— 设置主轴x轴的反向,水平向左,子元素从右到左排列

flex-direction: column—— 设置主轴y轴,垂直向下,子元素从上到下排列

flex-direction: column-reserve —— 设置主轴y轴,垂直向上,子元素从下到上排列

确定主轴之后,侧轴就是另一个轴,子元素跟随主轴排列

<style>
	div{
            display: flex;
            width: 60%;
            height: 400px;
            background-color: pink;
            flex-direction: column;	/* 设置主轴为y轴,方向垂直向下 */
        }
        span{
            width: 30%;
            height: 50%;		/* 就算3个子元素加起来的高度超了父盒子,也不会溢出父容器! */
            background-color: skyblue;
        }
    </style>
<div>
    <span>a</span>
    <span>b</span>
    <span>c</span>
</div>
复制代码

在这里插入图片描述


justify-content

使用前提: 主轴先确定好

justify-content 是定义主轴上子元素的 排列/对齐 方式

属性值说明
flex-start默认值 从头部开始向右排,主轴若是x轴,则从左到右
flex-end从尾部开始向左排,主轴若是x轴,则从右到左
center在主轴上居中对齐(x轴:水平居中并靠上;y轴:垂直居中并靠左)
space-around平分剩余空间
space-between最外部的先两边贴边,剩下的子元素再平分剩余空间

下列截图的例子以x轴为主轴

第一个flex-start 靠左 从左到右排

在这里插入图片描述

第二个flex-end 靠右从右到左排

在这里插入图片描述

第三个center 靠上居中排

在这里插入图片描述

第四个space-around 外边距margin-left和margin-right都一样

在这里插入图片描述

第五个space-between 第一个和最后一个贴边,剩下的分配中间的空间

在这里插入图片描述

flex-wrap

flex布局默认子元素都排在一条主轴线上,如果装不开,会缩小子元素的宽度,放到父元素里面,是不换行的。

默认值是不换行 flex-wrap: nowrap

flex-wrap: wrap是会自动换行,但是如果有太多个子项目,会超出到父容器的外面

在这里插入图片描述


align-items

适用于单行情况!!!

管的是侧轴的对齐方式

属性值说明
flex-start侧轴是y轴,则靠上;侧轴是x轴,则靠左
flex-end侧轴是y轴,则靠下;侧轴是x轴,则靠右
center侧轴是y轴,则垂直居;侧轴是x轴,则水平居中
stretch拉伸(默认值),侧轴是y轴,则子元素高度撑满父容器高度;侧轴是x轴,则子元素宽度撑满父容器宽度

第一个flex-start

如果主轴是x,flex-start则是按y轴这个侧轴,从上到下,靠上

如果主轴是y,flex-start则是按x轴这个侧轴,从左到右,靠左 在这里插入图片描述

第二个flex-end

如果主轴是x,flex-end则是按y轴这个侧轴,从下到上,靠下

如果主轴是y,flex-end则是按x轴这个侧轴,从右到左,靠右 在这里插入图片描述

第三个center

如果主轴是x,子元素横向排列,水平垂直居中

如果主轴是y,子元素纵向排列,水平垂直居中 在这里插入图片描述

第四个stretch

如果子项目主轴为x轴,侧轴为y轴, 且子项目不给高度,则子项目的高度会撑满父容器的高度

如果子项目主轴为y轴,侧轴为x轴, 且子项目不给宽度,则子项目的宽度会撑满父容器的宽度

<style>
        div {
            display: flex;
            width: 350px;
            height: 300px;
            background-color: pink;
            flex-direction: row;  /* 主轴方向 */
            /*  justify-content: center;   对于主轴的排列方式,默认左上 */
            flex-wrap: nowrap; /*  是否换行 */
            align-items: stretch;  /*   适用于单行, 对于侧轴的排列方式 */
        }
        span {
            width: 60px;
            /* height: 60px; */
            margin: 1px;
            background-color: skyblue;
        }
    </style>
    <div>
        <span>a</span>
        <span>b</span>
        <span>c</span>
        <span>d</span>
    </div>
复制代码

在这里插入图片描述在这里插入图片描述


align-content

适用于多行的情况!!!

设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现 换行 的情况(多行),在单行下是没有效果的

属性值说明
flex-start侧轴是y轴,则靠上;侧轴是x轴,则靠左
flex-end侧轴是y轴,则靠下;侧轴是x轴,则靠右
center侧轴是y轴,则垂直居;侧轴是x轴,则水平居中
space-around子项在侧轴平分剩余空间
space-between最外部的先贴侧轴两边,剩下的子元素再平分剩余空间
stretch拉伸(默认值),侧轴是y轴,则子元素高度平分父容器高度;侧轴是x轴,则子元素宽度平分父容器宽度

第一个flex-start

如果主轴是x,flex-start则是按y轴这个侧轴,从上到下,靠上,第二行紧接着第一行后面

如果主轴是y,flex-start则是按x轴这个侧轴,从左到右,靠左,第二列紧接着第一列后面 在这里插入图片描述

第二个flex-end

如果主轴是x,flex-end则是按y轴这个侧轴,靠下,第二行紧接着第一行后面

如果主轴是y,flex-end则是按x轴这个侧轴,靠右,第二列紧接着第一列后面 在这里插入图片描述

第三个 center

如果主轴是x,center则是按y轴这个侧轴,居中

如果主轴是y,center则是按x轴这个侧轴,居中 在这里插入图片描述

第四个 space-around

在这里插入图片描述

第五个 space-between

在这里插入图片描述 请添加图片描述

第六个 stretch

stretch 默认,第一行/列 贴边(贴上或贴左),剩下的其他行或列平分剩余空间

在这里插入图片描述

小总结

单行找 align-items
多行找 align-content

flex-flow

合写flex-direction 和 flex-wrap

flex-direction: row; flex-wrap: wrap 可以写成 flex-flow: row wrap;

flex-direction: column; flex-wrap: nowrap 可以写成 flex-flow: column nowrap;

align-self、order

了解即可

    <span>
        <div>1-1</div>
        <div style="align-self: flex-end;">1-2</div>
        <div style="order:-1">1-3</div>	<!-- 数值小越靠前,默认是0 -->
    </span>
复制代码

在这里插入图片描述

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改