弹性盒学习笔记(display:flex/inline-flex;)

最新推荐文章于 2024-08-26 09:52:27 发布
最新推荐文章于 2024-08-26 09:52:27 发布
阅读量2.1k 收藏 15
点赞数 2
文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwr3379966/article/details/105003865
版权
本文是关于CSS弹性盒模型的学习笔记，详细介绍了`display:flex/inline-flex`、`flex-direction`、`flex-wrap`、`justify-content`、`align-items`和`align-content`等主要属性，以及它们在定义flex容器和项目布局时的作用。内容涵盖了从主轴和侧轴的布局控制，到子元素的排列方式和对齐方式，是理解Flex布局的重要参考资料。
摘要由CSDN通过智能技术生成

文章目录

弹性盒学习笔记(display:flex/inline-flex;)

一.flex容器属性（给父级元素添加的属性）

1、display:flex、inline-flex

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

display:flex；如图
display:flex；
display:inline-flex；如图
inline-flex；

2、flex-direction属性 决定主轴的方向（即项目的排列方向）

flex-direction：row;设置主轴为X轴，Y为侧轴。（默认值）
在这里插入图片描述
flex-direction：row-reverse;设置反向X主轴
在这里插入图片描述
flex-direction：column;设置Y轴为主轴，X轴为侧轴
在这里插入图片描述
flex-direction：column-reverse;设置反向Y主轴
在这里插入图片描述

3、flex-wrap属性，定义子元素是否换行

最低0.47元/天 解锁文章
暂时的萌新
关注
超详细flex弹性盒学习笔记
qq_41635174的博客
01-20 430
llll
flex布局
W.J.H.
05-23 138
原文：https://www.runoob.com/w3cnote/flex-grammar.html 今天才发现有flex布局，== 网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一...
详解CSS中的display:flex||inline-flex属性|56375.pdf
12-12
介绍 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> .main{ width:200px; background-color: red
Css flex 布局
qq_54855933的博客
08-01 1155
css的flex布局
display：flex和display: inline-flex区别
FE攻城狮
05-06 7994
flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex .main{ background-color: #0f0; display: flex;/*父div设置该属性*/ } .main>div{ width: 50px; height: 5...
display:inline-flex使用
pscool的博客
03-07 4768
（当然更简单的方式，不套外层的inline-flex容器，直接在.box中使用vertical-align:top也可以解决这个对齐的问题，但是假设这里的span和div大小是不一样的，那么它们在同一行中并不能垂直居中对齐，而且垂直居中也是比较麻烦的-或者说把2个都设置为vertical-align:middle也可以垂直居中,而如果使用margin-top则两个都会一起向下移动达不到效果。，不管它们两个是不是一样大小，都能比较简单的垂直居中对齐，这样就可以。
html5中display flex,详解CSS中的display:flex||inline-flex属性
weixin_35691102的博客
06-16 1265
这篇文章主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。介绍Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。fl...
display: flex 和 display: inline-flex区别与使用
qq_41910413的博客
03-05 1058
display: inline-flex;
【学习笔记】HTML+CSS模仿静态淘宝首页
热门推荐
ImDaret的博客
10-08 2万+
一、先上一张成果图 二、已上传Github https://github.com/ImDaret/Front-end-learning 三、直接上代码（头大预警） HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
学习计算机编程（IT、偏网站开发）的参考学习网址syk
chouzhan0246的博客
06-01 9680
这两年自己学到了许多东西，发现以前想学，可却不知道在哪里学，没有好的学习资源，这里我把这一年自己学习过程中了解到的好的计算机相关知识的学习网址分享给大家，虽然不是很全面，但希望能帮到那些想找学习资源的博友们。 IT学习资料（初晓） 1. 综合学习网址 （1）教学网站 http://...
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
移动web——学习笔记整理
Thaley的博客
01-22 3690
学习笔记整理——移动web(黑马的)
display：flex和display: inline-flex的使用效果区别
滴水石穿
11-03 6471
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta...
CSS中display为flex和inline-flex的区别
侯阮悦的博客
06-20 5249
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。 display: flex 将对象作为弹性伸缩盒显示 display: inline-flex 将对象作为内联块级弹性伸缩盒显示 flex 效果： 没有为父元素设置宽度，所以父元素的宽度为100%，而高度则是由子元素撑开，既高...
弹性盒子display：flex
你还有我
12-21 3641
目录弹性盒子flex-direction 排列方向flex-wrap规定是否换行justify-content主轴排列align-items侧轴排列方式单个元素的align-selfflex-grow放flex-shrink缩flex-basisorder 弹性盒子 声明定义： 使用display：flex或display：inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们，会遵循弹性布局。 【注】一般是使用display:flex. inline-flex极少用。 flex:如果没有为父
display: flex和display: inline-flex区别
最新发布
风情
08-26 394
play: flex和都是CSS中的属性，用于创建Flexbox容器，但它们在布局表现上有一些关键区别。
display：inline-flex和display：flex有什么区别？
CHCH998的博客
08-13 1060
I am trying to vertically align elements within an ID wrapper. 我正在尝试在ID包装器中垂直对齐元素。 I gave the prope
【CSS】display：flex和display: inline-flex区别
Triumph_light的博客
02-19 574
此处虽然木有给父元素设置宽度，但是父元素默认会根据子元素的宽高去自适应。inline-flex：将对象作为内联块级弹性伸缩盒显示。此时没有为父元素main设置宽度，默认为100%；flex：将对象作为弹性伸缩盒显示。导致这个效果的根本原理还是。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值