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

最新推荐文章于 2024-04-27 15:04:57 发布
最新推荐文章于 2024-04-27 15:04:57 发布
阅读量2k 收藏 15
点赞数 2
文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwr3379966/article/details/105003865
版权

文章目录

弹性盒学习笔记(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主轴
在这里插入图片描述

<
最低0.47元/天 解锁文章
暂时的萌新
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弹性盒布局
w8666999的博客
11-20 1369
弹性盒布局
超详细flex弹性盒学习笔记
qq_41635174的博客
01-20 400
llll
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
display:inline-flex使用
pscool的博客
03-07 4474
（当然更简单的方式，不套外层的inline-flex容器，直接在.box中使用vertical-align:top也可以解决这个对齐的问题，但是假设这里的span和div大小是不一样的，那么它们在同一行中并不能垂直居中对齐，而且垂直居中也是比较麻烦的-或者说把2个都设置为vertical-align:middle也可以垂直居中,而如果使用margin-top则两个都会一起向下移动达不到效果。，不管它们两个是不是一样大小，都能比较简单的垂直居中对齐，这样就可以。
display：flex 弹性布局
zzb_lly的博客
04-27 1489
stretch (默认值) : 拉伸 flex 项以填充整个容器（这里特别要注意：如果 flex 项有尺寸属性（min-width / max-width / width / min-height / max-height / height），那么首先应用这些尺寸属性，伸展，就是会填充宽度。space-between: flex 项沿主轴均匀排布，即我们常说的沿主轴 两端对齐 ，第一 个flex 项在主轴开始位置，最后一个flex 项在主轴结束位置。flex-grow: 定义子元素的放大比例;
display: flex 和 display: inline-flex区别与使用
qq_41910413的博客
03-05 869
display: inline-flex;
display: inline-flex的妙用以及和display: flex 的区别是什么？
浮生的博客
09-17 6508
有时候我们使用了display: flex属性后，子元素横向排列，你可能会发现如下图现象： 父级元素不设置宽度，背景宽度默认100%，如果这时想让父级元素随着子元素宽度自适应，怎么处理？ 接下来，上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .wrap { display: flex;
前端响应式布局笔记-flex
06-05
为了简化代码，我们可以使用`flex`属性一次性设置`flex-grow`、`flex-shrink`和`flex-basis`。格式为`flex: <flex-grow> <flex-shrink> <flex-basis>;`。如果不提供所有值，浏览器会使用默认值，如`flex: 1;`等同于`...
CSS样式学习笔记之四：创建导航条
05-24
flex-direction: column; /* 列表变为垂直排列 */ } } ``` 6. **添加动态效果**： 为了增强用户体验，可以给导航条添加过渡效果。例如，当鼠标悬停在链接上时，我们可以让背景颜色平滑过渡： ```css nav a {...
前端学习笔记，做一个简单的网站-将class的属性值中的hide更换为show，学习代码
最新发布
06-21
/* 或者 'inline', 'flex' 等，取决于元素原本的display类型 */ } ``` `display: none`会使元素完全不可见，而`display: block`则会让元素正常显示。这样，通过JavaScript切换class，就可以实现元素的隐藏与显示。 ...
css入门笔记
05-15
1.css的概述 1.问题 ... 2.css的语法规范 1.... 1.... 样式声明：用样式属性和值组成（属性:值;... 1.... 2.... 3.... 2.... 3.... 独立于任何网页位置处，声明一个样式文件(.css为后缀)，在文件中声明样式，在使用的网页中引入.css文件。...
CSS-Layout-Notes
03-25
9. **CSS布局技巧**：这包括隐藏元素、清除浮动、使用`display`属性（如`inline-block`和`table-cell`）等，这些都是优化布局的实用工具。 10. **最佳实践**：遵循语义化HTML，合理使用布局技术，保持代码简洁，...
html5中display flex,详解CSS中的display:flex||inline-flex属性
weixin_35691102的博客
06-16 1227
这篇文章主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。介绍Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。fl...
display：flex和display: inline-flex区别
FE攻城狮
05-06 7984
flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex .main{ background-color: #0f0; display: flex;/*父div设置该属性*/ } .main>div{ width: 50px; height: 5...
flex布局
W.J.H.
05-23 130
原文：https://www.runoob.com/w3cnote/flex-grammar.html 今天才发现有flex布局，== 网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一...
好用的弹性布局
WYF857446152的博客
04-27 333
弹性布局的布局方式
弹性盒子display：flex
你还有我
12-21 3601
目录弹性盒子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:如果没有为父
前端基础入门之css 弹性盒 display:flex
热门推荐
LoveSummer
06-22 1万+
（弹性盒、伸缩盒）要使用弹性盒，必须先将一个元素设置为弹性容器我们通过 来设置弹性容器 弹性容器的子元素是弹性元素（弹性项）弹性元素可以同时是弹性容器主轴与侧轴 指定容器中弹性元素的排列方式 设置弹性元素是否在弹性容器中自动换行 简写属性 是和的简写属性 如何分配主轴上的空白空间（主轴上的元素如何排列） 元素沿着主轴起边排列 元素沿着主轴终边排列 元素居中排列 空白分布到元素两侧 空白均匀分布到元素间 空白分布到元素的单侧元素在辅轴上如何对齐 默认值，将元素的长度设置为相同的值 元素不会拉伸，沿着辅轴起
display: flex 水平居中
04-23
display: flex 是CSS中的一个属性，用于创建弹性布局。通过设置display: flex，可以将元素的子元素排列在一行或一列，并且可以轻松实现水平居中。 要实现水平居中，可以按照以下步骤进行操作： 1. 在父元素上设置 display: flex，将其变为弹性容器。 2. 使用 justify-content 属性来设置子元素在主轴上的对齐方式。要实现水平居中，可以将 justify-content 设置为 center。 下面是一个示例代码： HTML: ```html <div class="container"> <div class="item">内容1</div> <div class="item">内容2</div> <div class="item">内容3</div> </div> ``` CSS: ```css .container { display: flex; justify-content: center; } .item { /* 子元素的样式 */ } ``` 通过以上代码，子元素会在父元素的水平中心位置进行排列，从而实现水平居中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值