程序员经验分享-hwhale

弹性盒子（Flex）相关属性全解析

2023-11-18

目录

基本介绍

 添加在父元素上的属性(添加在flex容器上的)

（一）设置为弹性布局（display：flex；）

 （二）修改主轴的属性（flex-direction）

 （三）设置子元素是否折换（flex-wrap）

（四）设置主轴的对齐方式（justify-content）

（五） 侧轴对齐（align-itmes，align-content）

 添加在子元素上的属性(添加在flex项目上的)

（一）设置子元素前后顺序（order）

（二）设置子元素的放大比例（flex-grow）

（三）设置子元素的缩小比例（flex-shrink）

基本介绍

Flex容器：采用 Flex 布局的元素的父元素；

Flex项目：采用 Flex 布局的元素的父元素的子元素；

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

 添加在父元素上的属性(添加在flex容器上的)

（一）设置为弹性布局（display：flex；）

display:flex;    display:inline-flex;

特点： 

  1. 所有的子元素都横着排列的。
  2. 如果子元素的高度没有设置,则高度是默认拉伸的。
  3. 如果所有子元素的宽度之和大于父元素,默认情况下,子元素不会超出,宽度会被压缩。
  4. 如果子元素的高度大于父元素,则高度会超出。

代码展示：

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 500px;
            height: 500px;
            border: 2px solid black;
            /* 设为弹性盒子 */
            display: flex;
        }
        li{
            /* 去除默认样式 */
            list-style: none;
            width: 200px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

运行结果：

 （二）修改主轴的属性（flex-direction）

flex-direction:row; 默认值
flex-direction:row-reverse 横着反方向
flex-direction:column 主轴为竖着
flex-direction:column-reverse 竖着反方向

代码展示：

<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>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 500px;
            height: 200px;
            margin: 20px;
            border: 2px solid black;
            /* 设为弹性盒子 */
            display: flex;
            
        }
        li{
            /* 去除默认样式 */
            list-style: none;
            width: 50px;
            border: 1px solid red;
            text-align: center;
            font-size: 20px;
        }
        ul:nth-of-type(1){
            /* 默认值 */
            flex-direction: row;
        }
        ul:nth-of-type(2){
            /* 横轴取反 */
            flex-direction: row-reverse;
        }
        ul:nth-of-type(3){
            /* 改变主轴为竖轴 */
            flex-direction: column;
        }
        ul:nth-of-type(3) li{
            height: 40px;
        }
        ul:nth-of-type(4) li{
            height: 40px;
        }
        ul:nth-of-type(4){
            /* 改变主轴为竖轴并取反 */
            flex-direction: column-reverse;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

运行结果：

 （三）设置子元素是否折换（flex-wrap）

flex-wrap:nowrap; 默认值
flex-wrap:wrap; 换  常用值
flex-wrap:wrap-reverse; 换且反向

代码展示：

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 400px;
            margin: 10px;
            border: 1px solid black;
            display: flex;
        }

        li {
            text-align: center;
            font-size: 30px;
            list-style: none;
            width: 250px;
            border: 2px solid red;
            box-sizing: border-box;
        }

        ul:nth-of-type(1) {
            /* 设置折换属性 */
            flex-wrap: wrap;
        }
        ul:nth-of-type(2) {
            /* 设置折换反方向属性 */
            flex-wrap: wrap-reverse;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

运行结果：

（四）设置主轴的对齐方式（justify-content）

justify-content:flex-start; 主轴开始对齐
justify-content:flex-end; 主轴结束对齐
justify-content:center; 居中
justify-content:space-between; 2端对齐
justify-content:space-around; 2边间距和中间间距的比值是1:2
justify-content:space-evenly; 2边间距和中间间距的比值是1:1

代码展示：

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 500px;
            height: 200px;
            margin: 20px;
            border: 2px solid black;
            /* 设为弹性盒子 */
            display: flex;
            
        }
        li{
            /* 去除默认样式 */
            list-style: none;
            width: 50px;
            border: 1px solid red;
            text-align: center;
            font-size: 20px;
        }
        ul:nth-of-type(1){
            /* 主轴开始对齐(默认值)*/
            justify-content: flex-start;
        }
        ul:nth-of-type(2){
            /* 主轴结束对齐 */
            justify-content: flex-end;
        }
        ul:nth-of-type(3){
            /* 主轴居中对齐 */
            justify-content:center;
        }
        ul:nth-of-type(4){
            /* 主轴两端对齐 */
            justify-content:space-between;
        }
        ul:nth-of-type(5){
            /* 2边间距和中间间距的比值是1:2 */
            justify-content:space-around;
        }
        ul:nth-of-type(6){
            /* 2边间距和中间间距的比值是1:1 */
            justify-content:space-evenly;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

运行结果：

（五） 侧轴对齐（align-itmes，align-content）

注意：align-content属性必须搭配flex-wrap使用！！！

align-itmes
align-itmes:stretch ;  默认值
align-itmes:flex-start; 开始对齐
align-itmes:flex-end; 结束对齐
align-itmes:center; 居中
align-content
align-content:stretch ;  默认值
align-content:flex-start; 开始对齐
align-content:flex-end; 结束对齐
align-content:center; 居中
align-content:space-between; 2端对齐
align-content:space-around; 2边间距和中间间距的比值是1:2
align-content:space-evenly; 2边间距和中间间距的比值是1:1

代码展示：

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            flex-wrap: wrap;
            width: 1700px;

        }
        ul{
            width: 500px;
            height: 500px;
            margin: 20px;
            border: 2px solid black;
            /* 设为弹性盒子 */
            display: flex;
            flex-wrap: wrap;
            
        }
        li{
            /* 去除默认样式 */
            list-style: none;
            width: 200px;
            height: 100px;
            border: 1px solid red;
            text-align: center;
            font-size: 20px;
        }
        ul:nth-of-type(1){
            /* 侧轴开始对齐 */
            align-content:flex-start;
        }
        ul:nth-of-type(2){
            /* 侧轴结束对齐 */
            align-content:flex-end;
        }
        ul:nth-of-type(3){
            /* 侧轴居中对齐 */
            align-content:center;
        }
        ul:nth-of-type(4){
            /* 侧轴两端对齐 */
            align-content:space-between;
        }
        ul:nth-of-type(5){
            /* 2边间距和中间间距的比值是1:2 */
            align-content:space-around;
        }
        ul:nth-of-type(6){
            /* 2边间距和中间间距的比值是1:1 */
            align-content:space-evenly;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

运行结果：

 添加在子元素上的属性(添加在flex项目上的)

（一）设置子元素前后顺序（order）

order：默认值是0，数值越小越靠前，可以给负数。

代码展示：

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            width: 600px;
            height: 400px;
            margin: 10px;
            border: 1px solid black;
            display: flex;
        }
        li {
            text-align: center;
            font-size: 30px;
            list-style: none;
            width: 250px;
            border: 2px solid red;
            box-sizing: border-box;
        }
        ul>li:nth-of-type(1){
            /* 默认为零，数值越小越靠前 */
            order: 1;
        }
        ul>li:nth-of-type(2){
            /* 数值最大在最后面 */
            order: 5;
        }
        ul>li:nth-of-type(3){
            /* 比第一个大比第二个小，所以在中间 */
            order: 3;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

运行结果：

（二）设置子元素的放大比例（flex-grow）

默认值为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

代码展示：

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            width: 1000px;
            height: 400px;
            margin: 10px;
            border: 1px solid black;
            display: flex;
        }
        li {
            text-align: center;
            font-size: 30px;
            list-style: none;
            width: 100px;
            border: 2px solid red;
            box-sizing: border-box;
            flex-grow:1;
        }
        ul>li:nth-of-type(1){
            /* 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 */
            flex-grow:2;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

运行结果：

（三）设置子元素的缩小比例（flex-shrink）

默认值为1。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。（适合移动端溢出出滚动条的效果，前提是利用弹性布局写）

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

代码展示：

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            width: 400px;
            height: 400px;
            margin: 10px;
            border: 1px solid black;
            display: flex;
        }
        li {
            text-align: center;
            font-size: 30px;
            list-style: none;
            width: 100px;
            border: 2px solid red;
            box-sizing: border-box;
            /* 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。 */
            flex-basis:1;
        }


    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

运行结果：

码字不易，点个赞再走吧~~~

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端HTML与CSS

CSS3

css

html

弹性盒子（Flex）相关属性全解析 的相关文章

随机推荐

  • 当pytest遇上poium会擦出什么火花 ?

    首先 创建一个test sample test demo py 文件 写入下面三行代码 def test bing page page get https www bing com assert page get title 必应 不要问题

  • 栈和队列-P79-9

    队列的最大容量为MaxSize 这句话并不是说该队列存满时的元素个数为MaxSize 这一种情况是最大容量为MaxSize 没有申请其他数据成员 判断队列满的条件是Q front Q rear 1 MaxSize 解释 通俗的解释 Q re

  • 强化学习:带起始探索的每次访问同策回合更新算法求解机器人找金币问题

    1 问题描述 2 环境建模 3 游戏环境类roadenv 设计 class roadenv def init self epsilon 0 5 gamma 0 8 状态空间 动作空间 self states 1 2 3 4 5 6 7 8

  • Python 线程池 ThreadPoolExecutor

    线程池 以前我们定义多线程任务的时候都是通过循环来控制线程数量 很不优雅 import threading class MyThread threading Thread def init self threadID name counte

  • 如何比较PixelCNN与DCGAN两种Image generation方法？

    今天组会读了一下deepmind的PixelCNN nips的那篇 不是很明白到底为什么follow的work这么多 而且pixel rnn还拿了best paper award 感觉pixel by pixel生成是一种非常反直觉的生成方

  • png格式解码库移植过程详解

    1 zlib库和png库的源码获取 1 zlib库源码下载网址 http www zlib net 2 libpng库源码下载网址 ftp ftp simplesystems org pub libpng png src libpng16

  • Redis 整合 Jedis SpringBoot

    1 Redis 整合 Jedis 1 1 Jedis 环境准备 A Jedis 的 Jar 包

  • 2021-07-28 读书笔记：Python 学习手册（1）

    读书笔记 Python 学习手册 1 结于2021 07 28 OREILY的书籍 可读性很强 入门类 而且这本书很厚 第一部分 使用入门 第二部分 类型和运算 书前文 Python是一种简单的 解释型的 交互式的 可移植的 面向对象的超高

  • python算法中的深度学习算法之前馈神经网络（详解）

    目录 学习目标 学习内容 前馈神经网络 多层感知机 卷积神经网络

  • 6 FFmpeg从入门到精通-FFmpeg滤镜使用

    1 FFmpeg从入门到精通 FFmpeg简介 2 FFmpeg从入门到精通 FFmpeg工具使用基础 3 FFmpeg从入门到精通 FFmpeg转封装 4 FFmpeg从入门到精通 FFmpeg转码 5 FFmpeg从入门到精通 FFmp

  • 多线程事务的实现

    为了提高效率 在批量执行SQL时 可以采用多线程并发执行的方式 每个线程在执行完SQL后 暂时不提交事务 而是等待所有线程的SQL执行成功后 一起进行提交 如果其中任何一个线程执行失败 则所有线程都会回滚 一 springboot多线程 声

  • 【STM32 HAL库+STM32CUBEMX】使用usart1打印串口数据

    1 设置RRC外部时钟 设置高速外部时钟 2 设置DEBUG调试 debug设置成SW 3 设置usart 设置模式为异步通信 比特率115200 起始位8位 停止位1位 没有奇偶效验 4 设置时钟 选择外部时钟HSE 选择PLLCLK 设

  • H5右侧悬浮

    前言 实现H5右侧悬浮 点击展开收回移除 示例如下 默认 点击动画移入 html代码片段 div class right item menu i class right menu icon i div class right item st

  • Redis缓存穿透、击穿和雪崩

    Redis是一种开源的高性能缓存数据库 常用于加速数据访问 提高系统性能 然而 在使用Redis时 我们需要注意一些常见的问题 例如缓存穿透 击穿和雪崩 这些问题可能会导致系统性能下降甚至崩溃 因此了解和解决这些问题是非常重要的 1 缓存穿

  • 关于版本回退后怎么还原原来的分支

    如果在reset当前分支到某个节点时发现操作失误 想还原当前操作 回到reset之前的分支 如下图所示 1 输入git reflog 查看分支所有的操作历史记录 2 查看HEAD num 其中num的数值越大 则代表当前的历史分支的时间点越

  • 医院管理信息系统 HIS EMR PACS LIS

    主要功能模块 系统设置 数据字典 业务数据 权限管理医疗卡 门诊挂号 大屏叫号 分诊 急诊管理 门诊医院站 门诊护士站 门诊收费 药库 药房 住院管理 住院结算 住院医生 住院护士 医技执行 手术室管理 会诊 临床路径 电子病历 院长查询

  • 自协商功能原理及工作过程

    自协商原理 自协商是通过一种叫做快速连接脉冲 Fast Link Pulse 的信号实现的 简称FLP 自协商的双方通过FLP来交换数据 在具备自协商能力的端口没有Link的情况下 端口一直发送FLP 在FLP中包含着自己的连接能力信息 包

  • 已有一个Excel表格，用VBA批量新建文件夹

    已有一组Excel表格数据 使用VBA快速批量建文件夹 不知道标题怎么写 已经有了这样一组数据 然后需要根据这两组数据新建文件夹 代码如下 Sub 建文件夹 Dim i As Integer 用于下方数组 Dim Arr1 Arr2 定义一

  • 浅析集合不安全例子

    package com bochy list import java util ArrayList import java util List public class ArrayListConcurrentProblem public s

  • 弹性盒子（Flex）相关属性全解析

    目录 基本介绍 添加在父元素上的属性 添加在flex容器上的 一 设置为弹性布局 display flex 二 修改主轴的属性 flex direction 三 设置子元素是否折换 flex wrap 四 设置主轴的对齐方式 justify

热门标签