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

最新推荐文章于 2023-03-26 11:28:27 发布
最新推荐文章于 2023-03-26 11:28:27 发布
阅读量385 收藏 1
点赞数
文章标签： css html flex 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guo_XiCheng/article/details/109300012
版权

文章目录

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布局教程：语法篇

立马精神了
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 + CSS3 制作的图文并茂页面
10-17
HTML5和CSS3制作的展示类页面，使用了HTML5及CSS3的新标签和特性，页面图文并茂。兼容IE9+、Chrome、Firefox等主流浏览器；页面兼容不同分辨率的屏幕。包含一个html文件，四个css文件，一个js文件及若干图片。由于包含一个mp4文件，故压缩包较大。Tips.本人js能力有限 故js代码较为简单。
CSS Flex布局(多图易懂易掌握)
lq24244的博客
04-27 426
先放总结 用于父元素的属性 display:flex; (设置为弹性盒布局) flex-direction; (修改主轴方向(主轴方向修改,则交叉轴方向也修改)) flex-wrap; (让元素换行) justify-content; (修改子元素在主轴上的分布方式) align-items; (修改子元素在交叉轴上的分布方式) 用于子元素的属性 flex-grow (默认不占用剩余空间,flex-grow:1则占用剩余空间) flex-shrink (如果父元素不停缩小,默认子元素可压缩,flex-shr
Flex布局演示01
howard2005的专栏
02-23 441
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 175
文章目录 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 3136
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 276
自己做的效果
FLEX展示---------炫不炫你说了算!
hacker47
07-10 111
今天做了下这个,放上来给大家瞧下,做JAVA做得好好的,突然迷上搞这玩意儿了,希望自己花的时间是值得的.   但我真不知道,在其它公司,做这DD是美工的活儿,还是程序员的活儿呢? 请大家给个准话儿!   ...
图文并茂！一文教你掌握十大排序算法之堆排序
欢迎来到「小菠萝」的博客
03-04 3516
1. 堆排序算法原理 堆排序（Heapsort）是指利用堆这种数据结构所设计的一种排序算法。它的最好、最坏和平均时间复杂度都为O(N*logN)，它是一种不稳定排序，下面了解堆这种数据结构。 堆是一种特殊的完全二叉树，分为大顶堆和小顶堆；在原有的二叉树的性质上，大顶堆还需要严格保证父节点的值大于等于孩子节点的值；小顶堆则严格保证父节点的值小于等于孩子节点的值。 堆只是一个逻辑结构，本质上...
JSP--图文并茂（五）
qq_47518713的博客
03-29 324
cookie Cookie(保存在浏览器）是服务端在 HTTP 响应中附带传给浏览器的⼀个⼩⽂本⽂件，⼀旦浏览器保存了某个 Cookie， 在之后的请求和响应过程中，会将此 Cookie 来回传递，这样就可以通过 Cookie 这个载体完成客户端 和服务端的数据交互 Cookie : 是Servlet中的类,我们在jsp来创建 浏览器将cookie传给服务端 服务端接收 这也是创建cookie的方式 <% //客户端请求 Cookie...
html 图片布局,CSS 布局图片
weixin_42438410的博客
06-04 412
通过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 1515
容器，毫无疑问是近年来的又一个技术热词。容器化技术的诞生和兴起，以及它所催生的微服务架构、DevOps、云原生等技术理念，都对软件行业产生了深远的影响。 容器的优点有很多了，完善的封装、便捷的部署、轻量的启动和调度，这些都是容器技术受到欢迎的原因。与编排系统配合后，它能让我们的应用程序容易管理和迭代，即便是再复杂的系统也不在话下。 同时呢，容器应用还能做到非常好的可迁移性，环境中只要有符合标准的容器运行时就可以顺利运行。我相信你对容器其实有一定的了解，也知道 Docker 和 Kubernetes 分别是容
animation布局,style
thw_m的博客
10-08 493
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 2040
在一个图文并茂的网页上，文字环绕图片可以使布局美观紧凑，如何实现呢？有两种办法：1.利用图片属性实现代码如下：HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局H...
【css常用布局】带图片的名片介绍布局（小白向）
庞囧的博客
08-15 436
文章目录效果展示实现原理 效果展示 实现原理 布局分析： 这个布局可以根据实际业务需求进行调整。 html部分： <div class="container"> <!-- Image --> <div class="container_image"></div> <!-- Right side --> <div class="container_feature"> <p class="title"&g
05-css实现图文混排（页面效果）
高调做事，低调做人！
06-21 6407
CSS控制绝对定位 .picture { /* 在文本左边 */ float: left; /* 图片边框的颜色 */ border: 1px solid #000000; /* 上方与其他元素保持10px */ margin-top: 10px; /* 下方与其他元素保持10px */ margin-bottom: 10px; /* 左侧与其他元素保持10px */ mar
div css经典布局实例,div+css布局实例:常用图文混排（一）--腾讯图文 - 蜗爱CSS
weixin_31874603的博客
08-04 890
Example Source Codebody{/*公共样式*/margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"宋体","Arial Narrow";background:#fff;}div{overflow:hidden;}form,ul,li,p,h1,h...
DivCSS实例：上下结构的图文混排CSS列表
态度决定一切！
10-21 4759
CSS-flex布局详细讲解：
最新发布
weixin_45718431的博客
03-26 4309
CSS-flex布局详细及其flex布局携程网移动端案列
Flex布局图文详解与示例代码
07-29 1582
Flex布局，按照官方的说法，即FlexiBle Box（弹性布局），是一种比较灵活的页面布局方式。在深入学习Flex布局前，我们需要了解一些与 Flex 相关的概念。 一、基础概念 首先，我们来了解一下Flex布局中的一些术语：Flex容器、Flex项目、主轴、交叉轴、主轴空间、交叉轴空间，如下图所示： 图1 容器与项目 使用 Flex 布局的元素，称之为Flex容器，简称 “容器”。它的所有子元素自动成为容器成员，称为flex item(Flex项目)，简称“项目”。 主轴、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值