什么是（flex）弹性盒子主轴和侧轴

最新推荐文章于 2024-04-16 15:20:20 发布
最新推荐文章于 2024-04-16 15:20:20 发布
阅读量2.1k 收藏 5
点赞数
分类专栏： CSS3的理解 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44716411/article/details/108086777
版权

（flex）弹性盒子的主轴和侧轴

弹性盒子分为主轴和侧轴（又称交叉轴）

属性：flex-direction

主轴设置：flex-direction ：row 或row-reverse

主轴通俗来讲就是，X轴

侧轴设置：flex-direction ：column 或column-reverse

侧轴通俗来讲就是，y轴

白开水lhz
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS Web Flex弹性盒子模型代码实例
10-15
主要介绍了JS Web Flex弹性盒子模型代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
CSS-弹性盒子-主轴侧轴对齐方式
weixin_57936267的博客
05-17 5230
除了主轴和侧轴之外的弹性盒子相关元素以后再发文补齐，本章是弄清楚主侧轴的概念为主 一、基本概念 在开始之前，我们需要了解 Flex 和 主轴以及交叉轴（侧轴）别分是什么： 1.首先是Flex: Flex是Flexible Box的缩写，意味“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。 采用Flex布局的元素，称为Flex容器(flex container),简称“容器”。它所有的子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。.
15-弹性盒模型
weixin_55101030的博客
09-20 602
弹性盒模型
Web前端之弹性盒简介
花&败
11-26 542
flex（弹性盒、伸缩盒）cssflex。
弹性盒子(Flex Box)详解
热门推荐
web$-小白
07-24 2万+
弹性盒子 ,flex display
一文让你学会flex布局关于主轴 、侧轴的布局方式
m0_73920697的博客
10-21 2838
弹性盒子没有固定大小，弹性盒子就是内容大小，添加stretch取值会被拉伸 */space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间。space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧。space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等。/* 结论: Flex布局中,弹性盒子会在弹性容器中被拉伸或者被挤压。在stretch效果中,弹性盒子会沿着侧轴被拉伸直到充满整个盒子。弹性盒子有固定的大小，盒子该多大，就是多大。
《CSS学习笔记》弹性盒子
每天八杯水的博客
09-15 607
弹性盒子：让子元素显示在同一行。三种让多个div显示在同一行的方法
CSS篇-03 Flex布局基础讲解（一、主轴与侧轴的改变和对齐）
weixin_44552302的博客
12-20 4299
先了解几个东西： 1、伸缩容器和伸缩项 <ul> <li>1</li> <li>2</li> <li>3</li> </ul> 我想让li在ul中布局；这里ul是伸缩容器，li是伸缩项 2、伸缩容器的主轴和侧轴 默认情况下： 主轴起点为左，终点为右。 侧轴起点为上，终点为下。 ...
【移动端网页布局】flex 弹性布局 ② ( flex 弹性布局原理 | flex 容器属性 | 主轴与侧轴 | 设置主轴方向 flex-direction 样式 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-05 2706
一、flex 弹性布局原理 二、flex 容器 ( Flex Container ) 属性 三、设置主轴方向 flex-direction 样式 1、主轴与侧轴 2、设置主轴方向 flex-direction 3、代码示例 - 默认主轴方向: 从左到右 4、代码示例 - 修改主轴方向 : 从右到左 5、代码示例 - 修改主轴方向 : 从上到下 6、代码示例 - 修改主轴方向 : 从下到上
flex弹性盒子布局实例
11-08
flex弹性盒子布局实例，本次博客实例需要的一些资源，源代码，可自行下载研究，一起进步，共勉，一起加油
css3弹性盒子flex实现三栏布局的实现
01-22
用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会...
1-09-田永辰_flex_主轴对齐鸭_
10-01
主轴对齐功能，第一次使用HTML进行代码编写，加入了flex模块。
前端开发中或使用Bootstrap时,主轴、交叉轴(侧轴)的概念是什么？【使用类flex-column改变主轴方向为垂直方向】
昊虹AI笔记
09-27 475
前端开发中或使用Bootstrap时，交叉轴的概念是什么？
弹性盒子(flex) 改变主轴和强制换行
alienwareye的博客
11-11 3417
多行侧轴垂直排列 ,中间按照1比1划分。多行侧轴垂直排列 ,中间按照1比2划分。主轴两边靠边,中间自适应。flex默认的主轴是水平方向上的。2.flex(弹性盒子)强制换行。侧轴两边靠边,中间自适应。多行侧轴垂直排列 ,中间对齐。侧轴从最后一个开始排列。侧抽为垂直方向上的y轴.侧轴从第一个开始排列。默认方向值为 row。
Flex弹性布局详解
清颖的博客
07-16 560
Flex是弹性布局，也叫“弹性盒子”，前端开发常用布局，必备知识。本文详细介绍网页制作中常用的flex属性。
Flex布局组成与主轴,侧轴对齐方式
mwmmt的博客
10-08 358
Flex布局组成与主轴,侧轴对齐方式 flex布局,称为弹性布局,是浏览器提倡的布局模型,布局网页更灵活,方便.能够避免浮动脱标的问题.
弹性盒之主轴与交叉轴的区分
niannianxi的博客
03-21 1605
这周学习了弹性盒，而其中要区分好主轴和交叉轴，否则搞不清楚其排列的顺序： ①当里面的盒子为水平排列时：（没有折行发生时） 没有折行现象时不存在交叉轴： 有折行现象时： ①当里面的盒子为竖直排列时：（没有折行发生时） 没有折行现象时不存在交叉轴： 有折行现象时：       这就是主轴和交叉轴的区别了，以后布局的时候需要用到，希望自...
弹性盒子
goodcaoyu的博客
10-28 133
设置弹性盒子：display flex：块级的弹性盒子 inline-flex：行级的弹性盒子 -webkit-flex：苹果和谷歌的兼容性 搞清楚子元素和父元素 设置在父元素上的值 flex-direction：子元素在父容器中的位置（默认row） row：横向从左到右排列(左对齐)，默认排列 row-reverse：横向右对齐元素反转 column：纵向排列 column-reverse：反转纵向排列 主轴和交叉轴（侧轴） 主轴为flex-direction属性对其的方式的方向 交叉轴为主轴的垂直方
大屏-flex布局
最新发布
qq_38260470的博客
04-16 349
【代码】大屏-flex布局。
uniapp弹性盒子
09-14
uniapp是一种基于Vue.js的跨平台开发框架，可以方便地开发小程序、H5、App等多个平台的应用。在uniapp中，我们同样可以使用弹性盒子布局来实现灵活的页面布局。 通过在uniapp中使用弹性盒子布局，我们可以使用flexbox的各种属性和特性来控制元素在容器中的布局和排列方式。这些属性包括flex-direction、justify-content、align-items等等。 举个例子，我们可以在uniapp中创建一个flex容器，然后在其中放置多个子元素，通过设置不同的flex属性来控制它们的布局和自适应性。 在uniapp中使用弹性盒子布局的步骤如下： 1. 创建一个flex容器，可以是一个div元素或者是其他适当的容器。 2. 在容器中添加需要布局的子元素。 3. 通过设置容器的flex属性来控制子元素的布局方式，如flex-direction用于设置子元素的排列方向，justify-content用于设置子元素在主轴上的对齐方式，align-items用于设置子元素在侧轴上的对齐方式等等。 4. 可以根据需要设置子元素的flex属性来控制它们在容器中的占比和自适应性。 总结起来，uniapp中的弹性盒子布局使用起来非常方便，可以通过简单的设置来实现灵活的页面布局。通过灵活运用弹性盒子布局的各种属性和特性，我们可以轻松地实现各种不同的布局效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值