flexbox（二） 确定主轴（伸缩流）的方向&伸缩容器对伸缩项目换行&确定伸缩项目在伸缩容器中布局的顺序

最新推荐文章于 2023-08-29 07:30:29 发布
最新推荐文章于 2023-08-29 07:30:29 发布
阅读量977 收藏 1
点赞数
分类专栏： CSS3 文章标签： 伸缩流 换行 order flexbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wmaoshu/article/details/53227555
版权

确定主轴（伸缩流）的方向

 

 

该属性应用在伸缩容器上，从而确定了伸缩容器的主轴的方向，以至于为伸缩项目的布局做好准备。改变的是主轴的方向对于伸缩容器的宽高不会改变，不如column不会意味着宽和高数值交换，换句话说该属性不会对伸缩容器本身有影响除了不能设置多栏布局外。

该属性中row等值与文本的书写方向有关，比如以row为例，如果书写方向为ltr，那么row就是意味着主轴方向为从右到左，如果为rlt则相反。

还要注意的是，该属性仅仅影响了伸缩容器主轴的方向，同时意味着主轴的开始和结束也就确定下来了，也意味着确定了伸缩项目

最低0.47元/天 解锁文章
茂树24
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex 平铺布局_最详细完整的flex弹性布局
weixin_39965881的博客
12-19 2116
初了解在学习弹性布局之前首先就要明白其概念flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性任何一个容器都可以指定为flex布局.box{display: flex;}行内元素当然也可以使用flex布局.box{display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{display: -webkit-fl...
flex布局实现叠在另一个div之上_Flexbox弹性布局总结
weixin_31111107的博客
12-06 928
一. 为什么要学这个布局？css3中的flexbox生来就是为了布局而生的，使用它能使许多布局布局变得简单。典型的三栏式布局、垂直水平居中布局，使用的是传统的浮动法、定位法，代码相对复杂难懂，如果使用flexbox就会变得很简单。而且这个布局也是当下前端开发人员必备的技能，可以说是不得不学。二. 将一个元素变成Flexbox定义容器的语法：display : flex || inline-flex...
CSS中如何实现弹性盒子布局（Flexbox）的换行和排序功能？
官方推荐
08-29 1万+
CSS中如何实现弹性盒子布局（Flexbox）的换行和排序功能？
flex伸缩布局实现两边对齐，内容上下居中
努力学习中
05-16 1896
1：伸缩布局内部的内容实现两边对齐，上下居中。 display:flex; justify-content:space-between; align-item:center;//上下内容居中
flex伸缩布局的相关使用
qq_43468165的博客
03-13 166
flex伸缩布局的相关使用 基本理解可以去菜鸟教程查看弹性盒子 首先我列出几种我常用的 1.上下左右居中的写法，（在父盒子里面写） display:flex; justify-content:center; align-items:center; 2.控制到第几个元素的写法flex：权重，就是可以占到多宽 .main-column:nth-child(1) { flex: 3; } .main-column:nth-child(2) { flex: 4; } .main
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
第29章 CSS3弹性伸缩布局[中]
08-11
在本章中，我们将深入探讨CSS3中的弹性伸缩布局（Flexbox），这是一种现代的、响应式的网页布局模式，能够方便地处理元素的对齐、排列和尺寸调整。弹性布局在设计复杂页面结构时尤其有用，它使得开发者可以轻松应对...
微信小程序页面布局方式flexbox -温故而知新
03-29
微信小程序使用flexbox容器，flexbox布局由伸缩容器和伸缩项目组成。任何一个元素都可以指定为flexbox布局，其中设为display:flex或者display:inline-flex的元素称为伸缩容器。伸缩容器的子元素称为伸缩项目，伸缩...
第29章 CSS3弹性伸缩布局[上]
08-11
在本章中，我们将深入探讨CSS3中的一个关键布局模式——弹性伸缩布局（Flexbox布局）。这个现代的布局模型为网页设计者提供了一种强大而灵活的方式来组织和定位元素，无论屏幕尺寸如何，都能保持良好的用户体验。让...
左右可伸缩滑动门效果
09-18
Flexbox允许子元素在主轴（在这个例子中是水平方向）上伸缩，而Grid布局则可以更灵活地控制单元格的大小。 2. **过渡与动画**：为了实现滑动的效果，我们需要设置CSS的`transition`属性，指定元素在改变状态时的...
伸缩布局之是否换行
ITzhongzi的博客
02-06 1181
html> html> head lang="en"> meta charset="UTF-8"> title>title> style> * { margin: 0; padding: 0; list-style: none; } body {
flex布局中的主轴和侧轴的确定
weixin_30897079的博客
02-15 920
1.主轴和侧轴是通过flex-direction确定的 如果flex-direction是row或者row-reverse，那么主轴就是justify-contain 如果flex-direction是column或者column-reverse,那么主轴就是align-items 转载于:https://www.cnblogs.com/luguankun/p/10386233.html...
flex布局中使用flex-wrap实现换行
蔡姐的博客
04-04 2万+
使用flex-wrap进行分行布局
95_css笔记11_css的伸缩流布局（flex布局）
a_horse的博客
11-20 224
详细分析可以参考：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox 一，伸缩布局的使用 main axis：主轴 main start：主轴开始位置 main end：主轴结束位置 main size：主轴空间 cross axis：交叉轴 cross start：交叉轴开始位置 cross...
CSS3弹性伸缩布局盒（Flexible Box）模型
macanfa的博客
07-06 9111
主要整理了Flexbox模型布局功能、属性术语、语法规范、各版本语法变更和新版本Flexbox模型！除此之外，还有更头疼的是浏览器兼容性，需要多次练习整理才能好好使用伸缩布局模型来解决布局问题。
flex让盒子超出两个换行
weixin_38373875的博客
07-09 6536
html写法：注意我这里用的是uni-app的语法，view就是div 其他相同 <view class="abitem"> <view class="itemleft" v-for="(item,index) in iconType" :key="index"> <img :src="item.img" size="26" /> &l...
Flex布局伸缩布局属性详解
Lay-Buddhist的博客
01-12 1129
CSS3在布局方面做了非常大的改进，Flex布局官方称为CSS Flexble Box布局模型使得我们对块级元素的布局排列变得非常的灵活，适应性非常强。 其强大的伸缩性，可以提高元素在容器中的对齐、方向、顺序，甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间 。在响应式开发中发挥极大的作用。 本文主要讲解flex...
flex布局: 一行显示固定个数,强制换行且均匀分布(超出的分布靠左)
热门推荐
EnidChann的博客
10-24 7万+
如图需求: 1. 一行显示3个 2. 强制换行 3. 宽度不写死 4. 高度固定 -- html <div class="mycards"> <div class="card_item"></div> <div class="card_item"></div> <div class="card_item"&g...
flexbox三列布局
最新发布
03-17
在Flexbox中，可以使用`display: flex`将父容器设置为弹性容器，然后使用`flex-direction`属性来指定主轴的方向。对于三列布局，可以将主轴方向设置为水平方向（`row`），这样子元素就会水平排列。 接下来，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值