CSS弹性盒子

最新推荐文章于 2023-07-20 19:50:47 发布
最新推荐文章于 2023-07-20 19:50:47 发布
阅读量300 收藏
点赞数
分类专栏： CSS 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YANGMENGZHENG/article/details/120983855
版权
本文详细介绍了CSS3中的Flexbox布局，包括弹性盒子的三大核心元素：flex容器、flex项目和排列方向，以及flex容器的属性如flex-direction、flex-wrap、justify-content等，还有flex项目的属性如order、flex-grow等，最后探讨了使用Flexbox实现的页面布局方法。
摘要由CSDN通过智能技术生成

目录

前言

一、弹性盒子的三大核心元素

二、flex容器的属性

 1、flex-direction：布局方向

​ 2、flex-wrap：环绕效果

​

3、flex-flow 属性

​ 4、justify-content：用于水平对齐flex 项目

​ 5、align-items：用于垂直对齐 flex 项目

6、align-content ：用于对齐弹性线 

7、完美居中 

​

三、flex的项目属性

1、order

2、flex-grow

3、flex-shrink

4、flex-basis

5、flex

6、align-self

四、页面布局

1、网格布局

2、圣杯布局

    ​

前言

之前我们了解了CSS中的盒子模型，但是我们发现盒子模型必须伴随浮动和定位，否则无法完成期望的页面布局，所以在CSS3中有了更加强大并且方便的方式：Flexbox（弹性框布局模块），可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。这就解决了PC端布局合理的页面在移动端或其他界面显示不合理的问题。

一、弹性盒子的三大核心元素

1、flex容器（父元素）：采用flex布局的块级标签(div)

最低0.47元/天 解锁文章
命中。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3
chuyaonong6148的博客
04-27 350
justify-content 属性 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 各个值解析: flex-start： 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边...
css3弹性盒子温习
weixin_30673611的博客
11-13 122
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。 display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit brow...
CSS之选择符、链接、盒子模型、显示隐藏元素
weixin_30307921的博客
11-13 89
<html> <head> <meta charset="utf-8"> <title>选择符、链接、盒子模型、显示隐藏元素</title> <style> a:link{ color:red; } a:visited{ color:black; } a:hove...
15-弹性盒模型
weixin_55101030的博客
09-20 691
弹性盒模型
CSS弹性盒子.docx
02-29
CSS弹性盒子，也称为Flexbox，是CSS3中引入的一种强大的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和不同屏幕尺寸时。它允许开发者更灵活地控制元素的排列、对齐和空间分配，使网页设计更加简洁...
css弹性盒子（flex）管理系统布局
11-20
因为经常做后台管理系统，时不时都要去下一些框架，然而有时候仅仅只是需要一个页面框架布局，却需要引入一大堆文件，于是，自己用css弹性盒子（flex）简单做了一个管理系统布局，代码简单，下载即用。不是说人家...
这是一个css弹性盒子布局的一些语法
最新发布
06-22
这是一个弹性盒子布局的一些语法
XingGuoZM#FE-blog#CSS 弹性盒子布局（flex）1
07-25
父盒子 子盒子横轴：justify-content纵轴：align-items问题汇总（FAQ）问题一： overflow:auto;水平垂直居中参考关于 Fl
css3弹性盒子flex实现三栏布局的实现
01-22
弹性盒子本身就是并排的，我们设置宽度即可。 用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex...
CSS3弹性盒Flebox布局介绍和使用教程
Tseng
07-13 371
弹性盒布局（flexbox） 一、弹性盒布局介绍 1)弹性盒也叫伸缩布局盒模型 它是**css3引入的一种新的布局模式——flexbox**布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式，更便利于开发。 2)主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大...
CSS基础学习8-CSS设置盒装模式
rongrong_love_lc的专栏
10-24 250
八、CSS设置盒装模型 CSS中的盒装模型（box model）用于描述一个为html元素形成的矩形盒子。 涉及为各个元素调成外边距（margin）、内边距（padding）、边框（border）和内容的具体操作。 1.外边距和内边距：(margin、padding) value:top、bottom、left、right。 外边距（margi
CSS 的弹性布局(flex) ，是什么？
Learn-anything.cn
12-10 629
一、弹性布局 是什么？ 元素根据窗口大小变化而自动伸长或缩短，使得整个页面格式保持不变。 二、怎么使用？ 1、使用方法 /* 1、父元素中增加 display 属性；*/ display: flex; /* 2、子元素中增加 flex、flex-direction等属性；*/ flex: 1; flex-direction: column; 2、示例 新建 index.html 文件，复制下面代码到文件，用浏览器打开 index.html，在调整浏览器窗口大小，即可看到article 元素的大小也跟
css弹性布局基础知识分享
Stephen_CY666的博客
07-20 71
1.弹性布局 display:flex 1.父元素变成弹性盒模型后，子元素会变成行内块元素2.子元素在主轴上，会忽略自身宽度，自适应父容器。2.flex-direction:row 默认子项沿着x轴排列，从左到右。
css线条伸缩_CSS3弹性伸缩布局（上）——box布局
weixin_39534002的博客
12-21 186
布局简介CSS3提供了一种崭新的布局方式：Flexbox布局，即弹性伸缩布局模型(Flexible Box)用来提供一个更加有效的方式实现响应式布局。由于这种布局还处于W3C的草案阶段，并且它分为旧版本、新版本、混合过渡版本三种不同的编码方式。浏览器的兼容性存在一定的问题首先，我们来看看旧版本的浏览器兼容情况PS：这是网上的图，浏览器兼容信息可以通过该网站查询：http://www.caniuse...
css线条伸缩_CSS3弹性伸缩布局之box布局
weixin_39608509的博客
12-21 140
CSS3弹性伸缩布局简介2009年，W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局)，它可以简便、完整、响应式地实现各种页面布局，包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。其中混合过渡版本主要是针对IE10做了兼容。目前flex布局用得比较多的还是在移动端的布局，...
css弹性布局详解
weixin_43765641的博客
09-08 4096
6、align-content：调整换行对齐方式（交叉轴对齐方式，只有多行才有效果）column-reverse：主轴方向为垂直方向，起点在下边。row-reverse：主轴方向为水平方向，起点在右端。space-between：两端对齐，中间元素间隔相等。7、flex和flex-grow：分配剩余空间或者设置子元素的比例。row(默认)：主轴方向为水平方向，起点在左端。column：主轴方向为垂直方向，起点在上边。wrap-reverse：换行，第一行在下方。flex-start（默认值）：轴起点对齐。
CSS3 弹性盒子(Flex Box)
热门推荐
qq_52301431的博客
04-05 1万+
25、CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒子（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 案例，实现水平垂直居中： 正在上传…重新上传取消 绝对定位与负边距实现 #container{ position:relative; } ..
CSS弹性布局&网格布局
qq_64450294的博客
04-29 1702
一、Flexbox 弹性框布局模块，可更轻松设计灵活的响应式布局，而无需使用浮动或定位。 首先应给容器设置display 属性 <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> .flex-container { display: flex; } 其次，flex容器属性有： flex
css 弹性盒子模型
05-29
CSS弹性盒子模型（Flexbox）是一种用于布局设计的CSS3模块。使用弹性盒子模型可以轻松实现复杂的布局结构，而不需要使用传统的浮动和定位方法。 弹性盒子模型中，通过在容器上设置display:flex或display:inline-flex属性来将一个元素定义为弹性容器，容器内的子元素则成为弹性项。弹性容器内部的元素会根据设置的flex属性值，自动调整宽度和高度，从而实现灵活的布局效果。 弹性盒子模型中一些重要的概念和属性包括： 1. 弹性容器：将一个元素定义为弹性容器，通过设置display:flex或display:inline-flex属性来实现。 2. 弹性项：在弹性容器内部的子元素被称为弹性项，每个弹性项可以拥有自己的flex属性值，从而影响它在容器中的布局位置。 3. flex-direction属性：指定了弹性容器内弹性项的排列方向，默认值为row，即水平方向。 4. justify-content属性：指定了弹性容器内弹性项在主轴方向上的对齐方式，包括flex-start、flex-end、center、space-between和space-around等值。 5. align-items属性：指定了弹性容器内弹性项在侧轴方向上的对齐方式，包括flex-start、flex-end、center、baseline和stretch等值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值