图文并茂！为你展示Flex布局

最新推荐文章于 2022-04-18 17:53:01 发布
原创 最新推荐文章于 2022-04-18 17:53:01 发布 · 509 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html #flex #前端

本文详细介绍CSS Flex布局的各种属性，包括容器内的排列方向、换行方式、对齐方式以及子项目的属性设置等，帮助读者深入理解并掌握Flex布局的使用。

文章目录

css Flex布局

决定容器内的排列方向

flex-direction：row

在X轴方向排列，起点在左端
在这里插入图片描述

flex-direction：row-reverse

在X轴方向排列，起点在右端
在这里插入图片描述

flex-direction：column

在Y轴方向排列，起点在上沿
在这里插入图片描述

flex-direction：column-reverse

在Y轴方向排列，起点在下沿
在这里插入图片描述

决定容器内如何换行

flex-wrap：nowrap

如果一条轴线排列不下，不换行
在这里插入图片描述

flex-wrap：wrap

如果一条轴线排列不下，换行且第一行在上方
在这里插入图片描述

flex-wrap：wrap-reverse

如果一条轴线排列不下，换行且第一行在下方
在这里插入图片描述

排列方向及换行方式简写

flex-flow：row nowrap

flex-direction属性和flex-wrap属性的简写形式：flex-flow: <flex-direction> <flex-wrap>;

决定容器内的对齐方式：X轴

justify-content：flex-start

在X轴方向上，左对齐
在这里插入图片描述

justify-content：flex-end

在X轴方向上，右对齐
在这里插入图片描述

justify-content：center

在X轴方向上，居中对齐
在这里插入图片描述

justify-content：space-between

在X轴方向上，两端对齐，子项目之间的间隔都相等
在这里插入图片描述

justify-content：space-around

在X轴方向上，每个子项目两侧的间隔相等，子项目之间的间隔会比子项目与边框的间隔大一倍
在这里插入图片描述

决定容器内的对齐方式：Y轴

align-items：stretch

在Y轴方向上，如果子项目未设置高度或设为auto，将占满整个容器的高度
在这里插入图片描述

align-items：flex-start

在Y轴方向上，与上沿对齐
在这里插入图片描述

align-items：flex-end

在Y轴方向上，与下沿对齐
在这里插入图片描述

align-items：center

在Y轴方向上，居中对齐
在这里插入图片描述

align-items：baseline

与子项目的第一行文字的基线对齐
在这里插入图片描述

决定容器内的对齐方式：XY轴

定义整个项目在多行排列或多列排列时的对齐方式

如果整个项目只排满一行或一列，则该属性不起作用

align-content：stretch

flex-flow: row wrap：所有子项目在X轴优先排满
align-content：stretch：整个项目在Y轴方向上自动拉伸
在这里插入图片描述
flex-flow: column wrap：所有子项目在Y轴优先排满
align-content：stretch：整个项目在X轴方向上自动拉伸
在这里插入图片描述

align-content：flex-start

flex-flow：row wrap：所有子项目在X轴优先排满
align-content：flex-start：整个项目在Y轴方向上与上沿对齐
在这里插入图片描述
flex-flow：column wrap：所有子项目在Y轴优先排满
align-content：flex-start：整个项目在X轴方向上左对齐
在这里插入图片描述

align-content：flex-end

flex-flow：row wrap：所有子项目在X轴优先排满
align-content：flex-end：整个项目在Y轴方向上与下沿对齐
在这里插入图片描述
flex-flow：column wrap：所有子项目在Y轴优先排满
align-content：flex-end：整个项目在X轴方向上右对齐
在这里插入图片描述

align-content：center

flex-flow：row wrap：所有子项目在X轴优先排满
align-content：center：整个项目在Y轴方向上居中对齐
在这里插入图片描述
flex-flow：column wrap：所有子项目在Y轴优先排满
align-content：center：整个项目在X轴方向上居中对齐
在这里插入图片描述

align-content：space-between

flex-flow：row wrap：所有子项目在X轴优先排满
align-content：space-between：整个项目在Y轴方向上两端对齐
在这里插入图片描述
flex-flow：column wrap：所有子项目在Y轴优先排满
align-content：space-between：整个项目在X轴方向上两端对齐
在这里插入图片描述

align-content：space-around

flex-flow：row wrap：所有子项目在X轴优先排满
align-content：space-around：整个项目在Y轴方向上两侧间隔相等
在这里插入图片描述
flex-flow：column wrap：所有子项目在Y轴优先排满
align-content：space-around：整个项目在X轴方向上两侧间隔相等
在这里插入图片描述

定义单个子项目的属性

排列顺序：order

属性数值越小，排列越靠前，默认值为0
在这里插入图片描述

放大比例：flex-grow

默认值为0：即使存在剩余空间，也不放大
如果所有子项目的flex-grow都为1，则它们将等分剩余空间
在这里插入图片描述
如果一个子项目的flex-grow为2，其余为1，则前者占据的剩余空间是其他子项目的一倍
在这里插入图片描述

缩小比例：flex-shrink

默认值为1，即如果空间不足，该子项目将缩小；负值对该属性无效

如果所有子项目的flex-shrink都为1，当剩余空间不足时，都将等比例缩小
在这里插入图片描述
如果一个子项目的flex-shrink为0，其余为1，则空间不足时，前者不缩小
在这里插入图片描述

初始大小：flex-basis

该属性定义在分配多余空间之前，子项目占据的空间。

浏览器根据该属性计算是否有多余空间。它的默认值为auto，即子项目内容的大小
在这里插入图片描述

缩放比例及初始大小简写：flex

flex 属性是flex-grow、flex-shrink和flex-basis的简写，默认值 0 1 auto；后两个属性为可选值

flex 属性有两个快捷值：auto（1 1 auto）和 none（0 0 auto）

建议优先使用该属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

对齐方式：align-self

align-self 属性允许单个子项目有与其他子项目不一样的对齐方式，可覆盖align-items属性

align-self 属性默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同于stretch
在这里插入图片描述

参考链接

Flex布局教程：语法篇

前端工程师实战19：详解flex弹性盒布局与实战案例（图文并茂，小白也能听懂）
qq_26226059的博客
05-05 816
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！ flex弹性盒，伸缩盒 是一种新的布局手段，主要用来代替浮动来完成页面的布局 flex可以使元素具有弹性，让元素跟随页面的大小改变而改变 弹性容器：要使用弹性盒，必须先将一个元素设置为弹性容器 通过display:flex来设置块级弹性容器 通过display:inline-flex设置为行内弹性..
flex学习笔记 flex学习总结 flex学习教程
08-16
本教程是作者精心编写的Flex学习资料，适合初学者入门，通过图文并茂的方式，帮助读者快速掌握Flex的基本概念和核心技能。 1. **Flex基础**：Flex提供了MXML和ActionScript两种编程方式。MXML是一种声明式语言，...
Flex布局演示01
howard2005的专栏
02-23 577
Flex布局演示012009年，W3C 提出了一种新的方案——Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。1、效果图&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &l
CSS3之flex布局演示
weixin_30477293的博客
11-14 231
文章目录 0. 前言 1.基础概念 2. 容器属性（父属性：Properties for the Parent） 　　2.1.flex-direction属性 　　2.2.flex-wrap属性 　　2.3.flex-flow属性 　　2.4.justify-content属性 　　2.5.align-items属性 　　2.6.align-conte...
详讲flex布局案例演示
qq_41956361的博客
06-20 3226
flex介绍 ：FlexiableBox即是弹性盒，用来进行弹性布局，和groid网格布局无太大差异，但是flex更加简便参数少，灵活性大，目前手机端包括pc，小程序等大多数开发者喜欢使用flex布局， flex兼容版本 参数 //父元素属性 flex-direction//是布局方向 flex-wrap//是否换行 flex-flow//上面参数的总和 justify-content align-items align-content //项目属性 order flex-grow flex-s
FLEX大屏展示
lzyjlh的专栏
06-06 324
自己做的效果
FLEX展示---------炫不炫你说了算!
hacker47
07-10 150
今天做了下这个,放上来给大家瞧下,做JAVA做得好好的,突然迷上搞这玩意儿了,希望自己花的时间是值得的.   但我真不知道,在其它公司,做这DD是美工的活儿,还是程序员的活儿呢? 请大家给个准话儿!   ...
Flex布局教程PPT课件详解
Flex布局，全称为Flexible Box Layout，是CSS3中引入的一种全新布局模式，旨在提供一种更加高效、灵活的方式来对网页中的元素进行排列、对齐和分配空间，特别是在不同屏幕尺寸和设备上实现响应式设计方面具有显著...
Flex与CSS布局技术完全解析手册
Flex布局，全称为Flexible Box Layout，是CSS3中引入的一种全新布局模式，旨在提供一种更加高效、灵活的方式来对网页中的元素进行排列、对齐和分配空间，特别是在不同屏幕尺寸和设备上实现响应式设计方面具有显著...
微信小程序开发：从Block到Flex弹性布局解析
本文主要以块级元素div为例，通过图文并茂的方式进行讲解，适用于博客展示。" 在微信小程序开发中，理解布局方式至关重要，尤其是从传统的Block盒式布局到Flex弹性布局的转变。Block盒式布局是最基础的网页布局方式...
HTML5 + CSS3 制作的图文并茂页面
10-17
HTML5和CSS3制作的展示类页面，使用了HTML5及CSS3的新标签和特性，页面图文并茂。兼容IE9+、Chrome、Firefox等主流浏览器；页面兼容不同分辨率的屏幕。包含一个html文件，四个css文件，一个js文件及若干图片。由于包含一个mp4文件，故压缩包较大。Tips.本人js能力有限 故js代码较为简单。
一文看懂flex布局
前端成长之路
04-18 1万+
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 flex布局做为前端最为常用的布局方式之一，它的重要性不言而喻，今天我们来分享flex布局的应用； 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib
图文并茂！一文教你掌握十大排序算法之堆排序
欢迎来到「小菠萝」的博客
03-04 3817
1. 堆排序算法原理 堆排序（Heapsort）是指利用堆这种数据结构所设计的一种排序算法。它的最好、最坏和平均时间复杂度都为O(N*logN)，它是一种不稳定排序，下面了解堆这种数据结构。 堆是一种特殊的完全二叉树，分为大顶堆和小顶堆；在原有的二叉树的性质上，大顶堆还需要严格保证父节点的值大于等于孩子节点的值；小顶堆则严格保证父节点的值小于等于孩子节点的值。 堆只是一个逻辑结构，本质上...
JSP--图文并茂（五）
qq_47518713的博客
03-29 383
cookie Cookie(保存在浏览器）是服务端在 HTTP 响应中附带传给浏览器的⼀个⼩⽂本⽂件，⼀旦浏览器保存了某个 Cookie， 在之后的请求和响应过程中，会将此 Cookie 来回传递，这样就可以通过 Cookie 这个载体完成客户端 和服务端的数据交互 Cookie : 是Servlet中的类,我们在jsp来创建 浏览器将cookie传给服务端 服务端接收 这也是创建cookie的方式 <% //客户端请求 Cookie...
html 图片布局,CSS 布局图片
weixin_42438410的博客
06-04 512
通过CSS 布局图片圆角图片.img1 {border-radius: 8px;}.img2 {border-radius: 50%;}缩略图img {border: 1px solid #ddd;border-radius: 4px;padding: 5px;}响应式图片即会自动适配各种尺寸的屏幕,也就是宽高auto，图片放大的尺寸不大于原始大小。img {max-width: 100%;hei...
开源爆款，阿里P7技术笔记《k8s+docker》，图文并茂，理论与实战齐飞~
doubututou的博客
11-26 1586
容器，毫无疑问是近年来的又一个技术热词。容器化技术的诞生和兴起，以及它所催生的微服务架构、DevOps、云原生等技术理念，都对软件行业产生了深远的影响。 容器的优点有很多了，完善的封装、便捷的部署、轻量的启动和调度，这些都是容器技术受到欢迎的原因。与编排系统配合后，它能让我们的应用程序容易管理和迭代，即便是再复杂的系统也不在话下。 同时呢，容器应用还能做到非常好的可迁移性，环境中只要有符合标准的容器运行时就可以顺利运行。我相信你对容器其实有一定的了解，也知道 Docker 和 Kubernetes 分别是容
animation布局,style
thw_m的博客
10-08 571
style里面的 .da{     width:1200px;     height:700px;     background-image:url(../img/bg.jpg);} .divleft{     width:700px;     height:700px;     float:left;     }      .rightdiv{     wid
html图片排列布局下面字_HTML/CSS实现文字环绕图片布局
weixin_34551614的博客
12-30 2405
在一个图文并茂的网页上，文字环绕图片可以使布局美观紧凑，如何实现呢？有两种办法：1.利用图片属性实现代码如下：HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局H...
【css常用布局】带图片的名片介绍布局（小白向）
庞囧的博客
08-15 549
文章目录效果展示实现原理 效果展示 实现原理 布局分析： 这个布局可以根据实际业务需求进行调整。 html部分： <div class="container"> <!-- Image --> <div class="container_image"></div> <!-- Right side --> <div class="container_feature"> <p class="title"&g
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值