Css提高——flex布局及其相关属性

news/2024/7/24 10:13:16 标签: css, 前端

目录：

1、传统布局与flex布局的区别

2、flex的布局原理

 3、flex常见的父项属性

3.1、flex-direction ：设置主轴的方向

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

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

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

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

         3.6、flex-flow（flex-direction 和 flex-wrap 属性的复合属性

 4、flex常见的子项属性 

4.1、flex

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

1、传统布局与flex布局的区别

2、flex的布局原理

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

  • 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

 3、flex常见的父项属性

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

3.1、flex-direction ：设置主轴的方向

1、主轴和侧轴的概念

2、flex-direction的属性值

3、例子

如果我想要将flex的子元素从右往左排列的话，则需要对父元素添加flex-direction: row-reverse;属性

1、代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 800px;
            height: 600px;

            margin: 0 auto;
            border-radius: 12px;

            background-color: skyblue;

            display: flex;

            flex-direction: row-reverse;

        }

        span {
            width: 200px;
            margin-left: 10px;
            height: 100%;

            border-radius: 12px;

            background-color: pink;


        }
    </style>
</head>

<body>
    <div class="main">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>
2、 效果图

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

1、justify-content 的属性值：

2、例子：
2、代码： 
<!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>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 我们现在的主轴是y轴 */
            flex-direction: column;
            /* justify-content: center; */
            justify-content: space-between;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>
3、效果图：

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

1、flex-wrap 属性值

2、例子
1、代码
<!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>
        div {
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* flex布局中，默认的子元素是不换行的， 如果装不开，会缩小子元素的宽度，放到父元素里面  */
            /* flex-wrap: nowrap; */
            flex-wrap: wrap;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>
2、效果图

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

1、align-items 属性值

2、例子
1、代码：
<!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>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            flex-direction: column;
            justify-content: center;
            /* 我们需要一个侧轴居中 */
            /* 拉伸，但是子盒子不要给高度 */
            /* align-items: stretch; */
            align-items: center;
            /* align-content: center; */
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>
2、效果图：

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

1、align-content属性值

2、例子
1、代码
<!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>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 换行 */
            flex-wrap: wrap;
            /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
            /* align-content: flex-start; */
            /* align-content: center; */
            /* align-content: space-between; */
            align-content: space-around;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>

</html>
2、效果图：

3.6、flex-flow（flex-direction 和 flex-wrap 属性的复合属性）

1、flex-flow 属性值

 4、flex常见的子项属性 

4.1、flex

1、flex属性

2、例子
 1、代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 800px;
            height: 400px;

            background-color: skyblue;
            margin: 0 auto;
            border-radius: 12px;

            display: flex;
        }

        span {
            flex: 1;
            background-color: green;
            height: 100px;
            border-radius: 12px;
            margin-left: 10px;
        }

        .main span:nth-child(2) {
            flex: 2;
            background-color: blue;
            height: 100px;
            border-radius: 12px;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="main">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>
2、效果图

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

1、定义

align-self

order：

2、例子：
1、代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 90%;
            height: 400px;

            background-color: skyblue;
            margin: 0 auto;
            border-radius: 12px;


            display: flex;
            flex-direction: row;
        }

        span {
            flex: 1;
            background-color: green;
            height: 100px;
            border-radius: 12px;
            margin-left: 10px;
        }

        .main span:nth-child(2) {
            flex: 2;
            background-color: blue;
            height: 100px;
            border-radius: 12px;
            align-self: flex-end;
            margin-left: 10px;
        }

        .main span:nth-child(3) {
            height: 100px;
            border-radius: 12px;
            order: -1;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="main">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>
2、效果图：


http://www.niftyadmin.cn/n/5429102.html

相关文章

从前端到前端框架

从前端到前端框架

原文地址&#xff1a;从前端到前端框架 - Pleasure的博客 下面是正文内容&#xff1a; 前言 这是一篇笔记&#xff0c;主要用于帮助刚入门Web全栈不久的同学。以及个人思路的记录整理。 如果你是一个全栈大师就可以直接跳过了。当然想加深一下理解也没有问题。 可能会较多谈谈…
阅读更多...
Unity Timeline学习笔记(2) - PlayableTrack

Unity Timeline学习笔记(2) - PlayableTrack

PlayableTrack 是可自定义播放的轨道。我们可以通过进入轨道后调用自己的函数方法&#xff0c;使用起来也是比较顺手的。 添加轨道 我们点击加号添加 这样就有一个空轨道了&#xff0c;然后我们创建两个测试脚本。 添加脚本 分别是Playable Behaviour和PlayableAsset脚本。…
阅读更多...
python 基础练习题

python 基础练习题

目录 1、定义两个变量&#xff0c;交换两个变量【使用多种方式】 2、给定成绩&#xff0c;判断用户成绩的档次 3. 作业&#xff1a;下列哪一项是“4是奇数或-9为正数”的否定&#xff08; &#xff09; 4. 作业&#xff1a;判断一个整数是奇数还是偶数 5. 求矩形的面积和周…
阅读更多...
阿里云免费证书改为3个月，应对方法很简单

阿里云免费证书改为3个月，应对方法很简单

情商高点的说法是 Google 积极推进90天免费证书&#xff0c;各服务商积极响应。 情商低点的话&#xff0c;就是钱的问题。 现在基本各大服务商都在2024年停止签发1年期的免费SSL证书产品&#xff0c;有效期都缩短至3个月。 目前腾讯云倒还是一年期。 如果是一年期的话&#x…
阅读更多...
Spring Boot 获取maven打包时间

Spring Boot 获取maven打包时间

引入maven打包插件 <build><plugins><!-- 打包时生成打包时间 --><plugin><groupId>org.codehaus.mojo</groupId><artifactId>buildnumber-maven-plugin</artifactId><version>3.2.0</version><configuration&…
阅读更多...
Selenium 学习（0.20）——软件测试之单元测试

Selenium 学习（0.20）——软件测试之单元测试

我又&#xff08;浪完&#xff09;回来了…… 很久没有学习了&#xff0c;今天忙完终于想起来学习了。没有学习的这段时间&#xff0c;主要是请了两个事假&#xff08;5工作日和10工作日&#xff09;放了个年假&#xff08;13天&#xff09;&#xff0c;然后就到现在了。 看了下…
阅读更多...
Arcgis新建位置分配求解最佳商店位置

Arcgis新建位置分配求解最佳商店位置

背景 借用Arcgis帮助文档中的说明：在本练习中，您将为连锁零售店选择可以获得最大业务量的商店位置。主要目标是要将商店定位在人口集中地区附近，因为这种区域对商店的需求量较大。设立这一目标的前提是假设人们往往更多光顾附近的商店，而对于距离较远的商店则较少光顾。您…
阅读更多...
软考76-上午题-【面向对象技术3-设计模式】-创建型设计模式01

软考76-上午题-【面向对象技术3-设计模式】-创建型设计模式01

一、创建型设计模式一览 二、创建型设计模式 2-1、创建型设计模式的概念 一个类创建型模式使用继承改变被实例化的类&#xff1b; 一个对象创建型模式将实例化委托给另一个对象。 对应java的new一个对象。 2-2、简单工厂模式&#xff08;静态工厂方法&#xff09; 简单工厂…
阅读更多...
最新文章

Copyright @ 2022~2023