前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >总结一下CSS3中的Flex布局语法

总结一下CSS3中的Flex布局语法

作者头像
知识分子没文化
发布于 2023-07-01 07:56:00
发布于 2023-07-01 07:56:00
47300
代码可运行
举报
文章被收录于专栏:Roookie博客Roookie博客
运行总次数:0
代码可运行

Flex 布局有时候会用到,但是始终分不清楚其中的部分属性及其含义,所以用这篇博客专门总结一下 Flex 布局。

特别说明:博主初入门 Flex 布局看的是Flex 布局教程:语法篇 - 阮一峰的网络日志 (ruanyifeng.com)这篇教程,教程整体上条理清晰,讲得通俗易懂,但是不太方便快速查阅相关属性。因此本篇博客将以这篇教程为基础(所以不可避免地在文章结构与部分内容上可能会与教程有很大部分相似),以我自己的理解重新总结一遍 Flex 布局,以方便我自己查阅。如果您认为本篇博客讲的不够清楚,建议您参考教程原文。

另外,关于 Flex 布局中的属性效果演示,推荐看这个视频:

0x01. Flex 布局简介

网页布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便,比如,垂直水平居中就不容易实现。

2009年,W3C 提出了一种新的方案—— Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。

FlexFlexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

简单来说,Flex 布局可以极大地改善对于父元素和多个子元素进行布局的难度。

如何应用 Flex 布局

刚开始接触到 Flex 布局的时候,那么多的属性及其含义倒不是首要问题,最大的问题是不知道如何去应用 Flex 布局。

其实给一个元素添加 Flex 布局很简单,只需要在 CSS 代码中设置其 display 属性为 flex 或者 inline-flex 即可。其中,对于Webkit 内核的浏览器,还必须加上-webkit前缀。

对于divpformulol等这些块状元素,使用 Flex 布局的方式为(以 div 为例):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
div{
    display:flex;
    display:-webkit-flex
}

对于诸如 span 等行内元素来说需要将属性值更换为 inline-flex

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
span{
    display:inline-flex;
    display:-webkit-inline-flex;
}

注意:设置 Flex 布局以后,子元素的 floatclearvertical-align 属性将失效。

0x02. 基本概念

将采用了 Flex 布局的元素称为 Flex 容器(flex container)。它的所有子元素将自动成为容器成员,成为 Flex 项目(flex item)。

在 Flex 容器中,默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)(不知道为什么会起这么奇怪的名字)。

其中,主轴的开始位置叫做 main start,结束位置叫做 main end;而交叉轴的开始位置叫做 cross start,结束位置叫做 cross end

子元素默认沿主轴排列,单个子元素所占的主轴空间叫做 main size,占据的交叉轴空间为 cross size

以上就是在 Flex 布局中涉及到的一些基本概念。

除了基本概念之外,还有许多 Flex 布局会用到的属性,根据这些属性的使用位置可以简单将其分为两类,分别是应用在父元素(容器)上的属性应用在子元素(项目)上的属性。下面分别对其进行简单的介绍与解释。

0x03. 用于父元素的属性

3.1、flex-direction

flex-direction属性决定主轴的方向,表现就是 Flex 容器中子元素的排列方向(比如说横向或纵向)。

属性取值

默认值为 row

属性名

含义

row(默认值)

主轴为水平方向,起点在左端

row-severse

主轴为水平方向,起点在右端

column

主轴为垂直方向,起点在上边

column-reverse

主轴为垂直方向,起点在下边

图示说明
CSS代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.box {
    flex-direction: row | row-reverse | column | column-reverse;
}
3.2、flex-wrap

默认情况下,子元素都排在一条轴线上。

当子元素多到一条轴线排列不下的时候,用 flex-wrap 就可以定义这些子元素换行的形式,比如顺序、倒序之类的。

属性取值

默认取值为 nowrap,即不换行。

属性名

作用

nowrap(默认)

不换行

wrap

换行,第一行在上方

wrap-reverse

换行,第一行在下方

图示说明
CSS代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.box {
    flex-wrap: nowrap | wrap | wrap-reverse;
}
3.3、flex-flow

flex-flow 属性是 flex-directionflex-wrap 的缩写形式。

默认值为 row nowrap

3.4、justify-content

justify-content 属性定义了子元素在主轴上的对齐方式(比如靠左/右/上/下、居中等等)。

注意:这个属性与 flex-direction 有区别,不能混淆。

属性取值

默认值为 flex-start

属性名

作用

flex-start(默认)

左对齐

flex-end

右对齐

center

居中

space-between

两端对齐,子元素之间的间隔相等

space-around

每个子元素两侧的间距相等

space-evenly

子元素之间的间隔和子元素与边框的间隔相等(兼容性较差)

图示说明
CSS代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}
3.5、align-items

align-items 属性定义子元素在交叉轴上的对齐方式(与 justify-content 属性类似)。

属性取值

默认值为 stretch

属性名

作用

stretch(默认)

表示如果子元素未设置高度或设为auto,将占满整个容器的高度

flex-start

从交叉轴的起点对齐

flex-end

从交叉轴的终点对齐

center

从交叉轴的中点对齐

baseline

按照子元素的第一行文字的基线对齐

图示说明
CSS代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.box {
    align-items: flex-start | flex-end | center | baseline | stretch;
}
3.6、align-content

align-content 属性定义了多根轴线的对齐方式。如果子元素只有一根轴线,则属性不起作用。

属性取值

默认值为 stretch

属性名

作用

flex-start

沿交叉轴的起点对齐

flex-end

沿交叉轴的终点对齐

center

沿交叉轴的中点对齐

space-between

与交叉轴两端对齐,轴线之间的间隔平均分布

space-around

每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍

stretch(默认值)

轴线占满整个交叉轴

图示说明
CSS代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

0x04. 用于子元素的属性

4.1、flex-grow

元素布局时经常会出现这样的情况,当所有子元素水平排列时的宽度之和(或者纵向排列时的高度之和)小于父元素的宽度(高度)时,则当前父元素在这个方向上就会出现剩余空间。那么此时就可以用 flex-grow 属性来分配这些剩余空间,以使子元素完全填充父元素。

属性取值

flex-grow 属性的值是一个数字,没有单位。

默认值为0,表示如果存在剩余空间,也不会放大子元素的宽度(或高度)。

  • 当给子元素的 flex-grow 属性值设置为一样时,表示平均分配这个方向上的宽度(高度),可以利用这点来给元素做等宽布局。
  • 如果一个子元素的 flex-grow 属性为2,其他子元素都为1,则前者占据的剩余空间将比其他项多一倍。
  • 注意:当子元素的宽度/高度(width/height)属性与 flex-grow 同时存在时,元素最终的宽度/高度将由 flex-grow 属性来决定。
图示说明
CSS代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.item {
    flex-grow: ; /* default 0 */
}
4.2、flex-shrink

这个属性的含义与 flex-grow 相反,当剩余空间较小不足以容纳所有子元素时,就可用这个属性指定某个子元素的缩小比例。

属性取值

类似 flex-growflex-shrink 属性的值也是一个数字。该属性默认值为1,即如果空间不足,该子元素将缩小。

  • 如果所有子元素的 flex-shrink 属性都为1,当空间不足时,这些子元素都将等比例缩小。
  • 如果一个子元素的 flex-shrink 属性为0,其他子元素属性为1,则空间不足时,前者不缩小。
  • 负值对该属性无效。
图示说明
CSS代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.item {
    flex-shrink: ; /* default 1 */
}
4.3、flex-basis

flex-basis属性定义了在分配多余空间之前,子元素占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。

属性取值

默认值为 auto,即子元素本来的大小。

flex-basis 属性值可以设置成与 width 或者 height 属性一样的值,则子元素将占据固定空间。

CSS代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.item {
    flex-basis:  | auto; /* default auto */
}
4.4、flex

类似于前面的 flex-flow 属性,flex 属性是 flex-growflex-shrinkflex-basis 这几个属性的缩写形式。后两个属性(flex-shrinkflex-basis)可选。

默认值为“0 1 auto”。

4.5、align-self

align-self 属性允许某个子元素有与其他子元素有不一样的对齐方式,设置了这个属性之后,将会覆盖父元素的 align-items 属性。

默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 strech

属性取值

该属性的取值除了 auto ,其余的与 align-self 属性的取值相同。

属性名

作用

auto(默认)

继承父元素的 align-items 属性

flex-start

沿交叉轴的起点对齐

flex-end

沿交叉轴的终点对齐

center

沿交叉轴的中点对齐

baseline

按照子元素的第一行文字的基线对齐

stretch

如果子元素未设置高度或设为auto,将占满整个容器的高度

图示说明
CSS代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
4.6、order

order 属性可以很方便地定义子元素的排列顺序,而不用去调整 HTML 代码中元素的代码顺序。

属性取值

默认值为0

属性取值为数字,数字数值越小,则子元素排列越靠前。

0x05. 简单应用

其中最直观的应用就是将一个元素进行垂直水平方向的居中,且不管页面变化,依然能够生效。以 div 为例进行说明:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
            body{
                background-color:#ccc;
                display:flex;
                justify-content:center;
                align-items:center;
            }
            div{
                border:3px solid #000;
                background-image: linear-gradient(to right, #a18cd1, #fbc2eb);
                border-radius: 10px;
                width: 20%;
                height: 40%;
            }

预览效果:

在使用 Flex 布局方式进行垂直水平方向的居中布局时,只需要给父元素添加 Flex 布局方式,然后将 justifu-contentalign-items属性值都设为 center 即可,不仅设置起来简单,还能保持良好的兼容性。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
初步了解TensorFlow
在本章中,我们一起来学习下TensorFlow。我们将会学习到TensorFlow的一些基本库。通过计算一个线性函数来熟悉这些库。最后还学习使用TensorFlow搭建一个神经网络来识别手势。本章用到的一些库在这里下载。
夜雨飘零
2020/05/06
5580
TensorFlow_Tutorial_v3b——improving NN performance测验
Welcome to this week's programming assignment. Until now, you've always used numpy to build neural networks. Now we will step you through a deep learning framework that will allow you to build neural networks more easily. Machine learning frameworks like TensorFlow, PaddlePaddle, Torch, Caffe, Keras, and many others can speed up your machine learning development significantly. All of these frameworks also have a lot of documentation, which you should feel free to read. In this assignment, you will learn to do the following in TensorFlow:
列夫托尔斯昊
2020/08/25
1.4K0
TensorFlow_Tutorial_v3b——improving NN performance测验
改善深层神经网络 - 第二课第三周作业 TensorFlow Tutorial
Welcome to this week’s programming assignment. Until now, you’ve always used numpy to build neural networks. Now we will step you through a deep learning framework that will allow you to build neural networks more easily. Machine learning frameworks like TensorFlow, PaddlePaddle, Torch, Caffe, Keras, and many others can speed up your machine learning development significantly. All of these frameworks also have a lot of documentation, which you should feel free to read. In this assignment, you will learn to do the following in TensorFlow:
Steve Wang
2019/05/29
2.2K0
02.改善深层神经网络:超参数调试、正则化以及优化 W3. 超参数调试、Batch Norm和程序框架(作业:TensorFlow教程+数字手势预测)
笔记:02.改善深层神经网络:超参数调试、正则化以及优化 W3. 超参数调试、Batch Norm和程序框架
Michael阿明
2021/02/19
9330
【DL笔记5】一文上手TensorFlow,并搭建神经网络实现手写数字识别
从【DL笔记1】到【DL笔记N】,是我学习深度学习一路上的点点滴滴的记录,是从Coursera网课、各大博客、论文的学习以及自己的实践中总结而来。从基本的概念、原理、公式,到用生动形象的例子去理解,到动手做实验去感知,到著名案例的学习,到用所学来实现自己的小而有趣的想法......我相信,一路看下来,我们可以感受到深度学习的无穷的乐趣,并有兴趣和激情继续钻研学习。 正所谓 Learning by teaching,写下一篇篇笔记的同时,我也收获了更多深刻的体会,希望大家可以和我一同进步,共同享受AI无穷的乐趣。
beyondGuo
2018/10/25
8040
【DL笔记5】一文上手TensorFlow,并搭建神经网络实现手写数字识别
Convolution_model_Application_v1a
Welcome to Course 4's second assignment! In this notebook, you will:
列夫托尔斯昊
2020/08/25
1.7K0
Convolution_model_Application_v1a
卷积神经网络 第一周作业 Convolution+model+-+Application+-+v1
Welcome to Course 4’s second assignment! In this notebook, you will:
Steve Wang
2019/05/29
1.2K0
三天速成 TensorFlow课件分享
该教程第一天先介绍了深度学习和机器学习的潜力与基本概念,而后便开始探讨深度学习框架 TensorFlow。首先我们将学到如何安装 TensorFlow,其实我们感觉 TensorFlow 环境配置还是相当便捷的,基本上按照官网的教程就能完成安装。随后就从「Hello TensorFlow」开始依次讲解计算图、占位符、张量等基本概念。
刘盼
2018/03/16
2K0
三天速成 TensorFlow课件分享
04.卷积神经网络 W1.卷积神经网络(作业:手动/TensorFlow 实现卷积神经网络)
0 padding 会在图片周围填充 0 元素(下图 p = 2 p=2 p=2 )
Michael阿明
2021/02/19
9730
TensorFlow 深度学习第二版:1~5
人工神经网络利用了 DL 的概念 。它们是人类神经系统的抽象表示,其中包含一组神经元,这些神经元通过称为轴突的连接相互通信。
ApacheCN_飞龙
2023/04/23
1.7K0
TensorFlow 深度学习第二版:1~5
数据科学 IPython 笔记本 一、TensorFlow
一、TensorFlow 原文:TensorFlow Tutorials 译者:飞龙 协议:CC BY-NC-SA 4.0 1.1 TensorFlow 基本操作 致谢:派生于 Aymeric Damien 的 TensorFlow 示例 配置 参考配置指南。 import tensorflow as tf # 基本的常量操作 # 由构造器返回的值 # 表示常量操作的输出 a = tf.constant(2) b = tf.constant(3) # 加载默认图 with tf.Session(
ApacheCN_飞龙
2022/05/07
3900
数据科学 IPython 笔记本 一、TensorFlow
深入浅出解读卷积神经网络
作者:石文华 编辑:田 旭 卷积神经网络 图1 全连接神经网络结构图 图2 卷积神经网络结构图 卷积神经网络和全连接的神经网络结构上的差异还是比较大的,全连接的网络,相邻两层的节点都有边相连,而卷积神
机器学习算法工程师
2018/03/06
7110
深入浅出解读卷积神经网络
TensorFlow-GPU线性回归可视化代码,以及问题总结
通过TensorBoard将TensorFlow模型的训练过程进行可视化的展示出来,将训练的损失值随迭代次数的变化情况,以及神经网络的内部结构展示出来,以此更好的了解神经网络。
andrew_a
2019/07/30
7810
TensorFlow-GPU线性回归可视化代码,以及问题总结
简单的TensorFlow分类教程
本篇文章有2个topic,简单的分类器和TensorFlow。首先,我们会编写函数生成三种类别的模拟数据。第一组数据是线性可分的,第二种是数据是月牙形数据咬合在一起,第三种是土星环形数据。每组数据有两个类型,我们将分别建立模型,对每组数据分类。
用户1332428
2018/07/30
5480
简单的TensorFlow分类教程
解决AttributeError: module tensorflow has no attribute placeholder
如果你在使用TensorFlow时遇到了"AttributeError: module 'tensorflow' has no attribute 'placeholder'"的错误,这意味着你正在使用的TensorFlow版本与你的代码不兼容。这个错误通常是因为在TensorFlow 2.0及更高版本中,'placeholder'被移除了。 为了解决这个问题,有几种方法可以尝试:
大盘鸡拌面
2023/10/17
2.7K0
TensorFlow线性回归与逻辑回归实战
Huber loss是为了增强平方误差损失函数(squared loss function)对噪声(或叫离群点,outliers)的鲁棒性提出的。
公众号guangcity
2019/09/20
1.6K0
TensorFlow线性回归与逻辑回归实战
深度学习之 TensorFlow(五):mnist 的 Alexnet 实现
尝试用 Alexnet 来构建一个网络模型,并使用 mnist 数据查看训练结果。 我们将代码实现分为三个过程,加载数据、定义网络模型、训练数据和评估模型。 实现代码如下: #-*- coding:utf-8 -*_ #加载数据 import tensorflow as tf # 输入数据 from tensorflow.examples.tutorials.mnist import input_data #TensorFlow 自带,用来下载并返回 mnist 数据。可以自己下载 mnist数据
希希里之海
2018/05/16
7160
机器之心GitHub项目:从零开始用TensorFlow搭建卷积神经网络
机器之心原创 参与:蒋思源 机器之心基于 Ahmet Taspinar 的博文使用 TensorFlow 手动搭建卷积神经网络,并提供所有代码和注释的 Jupyter Notebook 文档。我们将不仅描述训练情况,同时还将提供各种背景知识和分析。所有的代码和运行结果都已上传至 Github,机器之心希望通过我们的试验提供精确的代码和运行经验,我们将持续试验这一类高质量的教程和代码。 机器之心项目地址:https://github.com/jiqizhixin/ML-Tutorial-Experiment
机器之心
2018/05/08
1.5K0
机器之心GitHub项目:从零开始用TensorFlow搭建卷积神经网络
Tensorflow快速入门
作者:叶 虎 编辑:李文臣 PART 01 Tensorflow简介 引言 实践深度学习肯定要至少学习并掌握一个深度学习框架。这里我们介绍一个最流行的深度学习框架:Tensorflow。Tensorf
机器学习算法工程师
2018/03/06
1.1K0
Tensorflow快速入门
tensorflow入门:Neural Network for mnist
我们使用tensorflow实现类似于上图的简单深度网络,用于mnist数据集预测模型的实现。理论方面不再赘述。
Steve Wang
2019/05/26
4910
推荐阅读
相关推荐
初步了解TensorFlow
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验