关于CSS盒模型的flex弹性布局的笔记

最新推荐文章于 2023-02-24 23:09:58 发布

XIao___FAN

最新推荐文章于 2023-02-24 23:09:58 发布

阅读量304

点赞数

分类专栏：笔记文章标签： css css3 前端

本文链接：https://blog.csdn.net/XIao___FAN/article/details/121725505

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言：

以下内容由小范看黑马程序员flex的相关视频整理的笔记，希望能帮助到大家。

flex布局

可以用少量的的代码高效的实现各种页面的布局，是一个基础的但是必须会的基本技能。

与传统布局相比

传统布局：兼容性好布局繁琐局限性，不能在移动端较好的布局

flex弹性布局：操作方便，布局简单，移动端应用广泛 PC端浏览器支持情况差

flex布局初体验

现在小范想要让三个行内元素能设置宽高并且要让它们之间有均匀间距就如下图的效果

如果运用传统布局

那么代码是

/*CSS代码区*/
    <style>
        div{
            width: 760px;/*宽度*/
            height: 600px;/*高度*/
            background-color: #bfa;/*背景颜色*/
        }
        div span{
            display: inline-block;/*行内块元素设置*/
            margin: 0px 50px;/*间距*/
            width: 150px;/*宽度*/
            height: 100px;/*高度*/
            background-color: purple;/*span的背景颜色*/
        }
    </style>
<!--HTML代码区-->
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

操作一下发现很麻烦，因为你需要计算行内块元素之间的间距大小和父元素宽度的大小的关系

（或者可以HTML将span改成块元素然后将其display成inline形式）

而如果我们运用flex弹性布局

那么只需要

/*CSS代码*/
<style>
        div{
            width: 760px;
            height: 600px;
            background-color: #bfa;
            display: flex;/*设置flex布局*/
            justify-content: space-around;/*布局形式*/
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
        }
</style>
<!--HTML代码-->
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

十分便利。

flex布局原理

采用Flex布局的元素，成为Flex容器（flex container），简称为容器，他的子元素即为容器成员，成为Flex的项目，简称“项目”。

原理：通过给父元素添加flex属性，来控制子盒子的位置和排列方式

flex布局父元素常见六大属性

flex-direction：设置主轴方向

主轴与侧轴

默认主轴：水平向右 默认侧轴：水平向下

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

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

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

属性值	说明
flex-start	默认值从头部开始如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	从主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间（与边框之间会有间距,不会贴边)
space-between	先两边贴边，再平分剩余空间

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

flex布局中，默认是不换行的，如果父元素放不下，那么子元素会调整大小

默认值：nowrap

可选值：wrap

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

属性值	说明
flex-start	默认值从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）可以与justify-content的center一起用，使其完全居中
stretch	拉伸（但是子盒子不要给高度使子元素和父元素一样高（宽看主轴方向））

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

只能用于子项出现换行的情况，对单行是没有效果的

属性值	说明
flex-start	默认值再策州的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，在平分剩余空间
stretch	设置子项元素高度平分父元素高度

flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

示例：

flex-flow：row wrap；

flex布局子项常见属性

主要属性:

1.flex 子项目占的份数

格式：flex：数字；

如果给定左右的宽度：

代码

<style>        
        /*CSS代码*/
        .item{
            width: 700px;
            height: auto;  
        }
        .item div:nth-child(1){
            width: 100px;
            height: 150px;
            background-color: aqua;
        }
        .item div:nth-child(3){
            width: 100px;
            height: 150px;
            background-color: aliceblue;
        }
        .item div:nth-child(2){
            flex: 1;/*平分剩余部分*/
            background-color: #bfa;
        }
</style>
        <!--HTML代码-->
        <div class="item">
            <div></div>
            <div></div>
            <div></div>
        </div>

如果不给指定宽度，那么就是

代码

<style> 
       /*CSS代码*/
        p{
            display: flex;
            width: 760px;
        }
        p span{
            width: 150px;
            height: 100px;
            background-color: purple;
            flex: 1;/*子元素平分父元素*/
        }
        p span:nth-child(1){
            background-color: red;
        }
        p span:nth-child(3){
            background-color: blue;
        }
</style>
        <!--HTML代码-->
        <p>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </p>

2.align-self控制子项在侧轴的排列方式

用于子项自己在侧轴上的排列方式

3.order属性定义子项的排列顺序

示例

order：数字；

数字越小越前默认值为0；

所以可以设置数字为负数。

好了，flex布局大概就是这样了，小范要去更改他之前的作业了。