【前端学习笔记-弹性布局-1】

前端学习小霖

已于 2023-04-15 21:50:52 修改

阅读量64

点赞数

文章标签： html 前端前端框架学习笔记

于 2023-04-15 21:47:56 首次发布

本文链接：https://blog.csdn.net/m0_59503733/article/details/130175740

版权

本文介绍了将元素在一行内显示的几种方法，重点讲解了弹性布局的使用，包括如何开启弹性布局、设置flex-direction以改变主轴方向，以及justify-content和align-items在调整元素主轴和交叉轴对齐方式上的应用。示例代码展示了不同对齐方式的效果。

摘要由CSDN通过智能技术生成

01-将元素在一行里显示的方法

1、浮动

2、display：inline-block改成行内块元素

3、绝对定位

4、弹性布局

02-如何使用弹性布局display:flex;

<style>
 section {
            /* display:flex;开启弹性布局 
               弹性布局要加在父元素上*/
            display: flex;
            /* flex-direction是设置方向的
               flex-direction: row;默认是横向布局
                               column纵向布局
                               row-revers反转，横倒序布局
                               column-revers反转，纵倒序布局 */
            flex-direction: row;
        }
    div{
            width: 100px;
            height: 100px;
            border: 1px solid red ;
            text-align: center;
            line-height: 100px;
            /* margin: auto; */
        }
</style>

<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </section>
</body>

03-flex-direction的作用

设置flex容器中主轴的方向。它决定了flex项目在容器中的排列方式，可以是水平方向（row或row-reverse）或垂直方向（column或column-reverse）。该属性还会影响到交叉轴的对齐方式和项目的顺序。flex-direction: column;的值是谁，谁就是主轴另一个方向就叫做交叉轴。

04-justify-content的作用

主轴方向的对齐方式。它控制了flex项目在主轴上的位置分布，可以让项目沿着主轴居中对齐、靠近起点或终点对齐、平均分布等。

justify-content: center;设置子项居中

flex-start: 设置项目位于容器开始位置

flex-end: 设置项目位于容器结束位置

space—around 平均排开第一个元素的左边和最后一个元素的右边是中间距离的一半

space-evenly 平均排开等分

space-between 平均排开第一个元素在最左边和最后一个元素最右边

05-align-items的作用

用于设置flex容器中交叉轴方向的对齐方式。它控制了flex项目在交叉轴上的位置分布，可以让项目沿着交叉轴居中对齐、靠近起点或终点对齐、平均分布等。

center居中

start开始位置,系统默认设置是start

end结束位置

baseline 设置水平方向的对齐方式基线四线三格的第三条线上(以第一行文字基线对齐）

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 600px;
            border: 1px solid red ;
            /* 目前，是对于row，justify-content是设置水平方向的对齐方式
               align-items是设置垂直方向的对齐
                */
            display: flex;
            /* flex-direction: column;的值是谁，谁就是主轴
               另一个方向就叫做交叉轴
               
               例如，*/
            flex-direction: column;
            /* 在父元素设置对齐方式
               设置子项水平方向的居中 */
            /* justify-content: center;设置子项居中
               flex-start: 设置项目位于容器开始位置
               flex-end:  设置项目位于容器结束位置
               space—around 平均排开第一个元素的左边和最后一个元素的右边是中间距离的一半
               space-evenly 平均排开等分
               space-between 平均排开第一个元素在最左边和最后一个元素最右边*/
            justify-content: space-between;
            /* 边轴方向的center居中
                        start开始位置,默认是开始位置
                        end结束位置
                        baseline 设置水平方向的对齐方式基线 四线三格的第三条线上(以第一行文字基线对齐）*/
            align-items: center;
        }
        span{
            font-size: 100px;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <!-- <span>f</span> -->
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <!-- <span>p</span> -->
</body>
</html>