弹性盒之主轴与交叉轴的区分

最新推荐文章于 2024-07-24 15:51:54 发布
最新推荐文章于 2024-07-24 15:51:54 发布
阅读量1.6k 收藏 7
点赞数 4
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niannianxi/article/details/105009785
版权
这周学习了弹性盒，而其中要区分好主轴和交叉轴，否则搞不清楚其排列的顺序：

①当里面的盒子为水平排列时：（没有折行发生时）

没有折行现象时不存在交叉轴：
在这里插入图片描述
有折行现象时：
在这里插入图片描述
①当里面的盒子为竖直排列时：（没有折行发生时）

没有折行现象时不存在交叉轴：

在这里插入图片描述
有折行现象时：
在这里插入图片描述

      这就是主轴和交叉轴的区别了，以后布局的时候需要用到，希望自己能够加以区别。fighting!!!

꧁年年曦꧂
关注
专栏目录
弹性容器 （flex）的轴
qiaokelibangwo的博客
05-15 349
弹性容器的主轴一般默认是x轴，副轴为y轴，且没有z轴。 主轴排列方式语法： justify-content: space-between; 左右侧盒子无缝隙，中间盒子间距平等 主轴排列方式 如果给父盒子添加 display: flex justify-content: center; justify-content: space-between; 左右两侧无缝隙 justify-content: space-around;...
弹性盒子flex轴的说明
ANGWH的博客
04-19 1040
弹性盒子flex中，有两种轴 一种是主轴，一种是交叉轴（侧轴）。 flex默认轴布局是这样的： flex-direction 是决定主轴的方向 row 从左到右水平排列元素（默认值）如上图 row-reverse 从右向左排列元素 column 从上到下垂直排列元素 column-reverse 从下到上垂直排列元素 justify-content 定义项目在主轴的对齐方向. flex...
弹性盒子
goodcaoyu的博客
10-28 148
设置弹性盒子：display flex：块级的弹性盒子 inline-flex：行级的弹性盒子 -webkit-flex：苹果和谷歌的兼容性 搞清楚子元素和父元素 设置在父元素上的值 flex-direction：子元素在父容器中的位置（默认row） row：横向从左到右排列(左对齐)，默认排列 row-reverse：横向右对齐元素反转 column：纵向排列 column-reverse：反转纵向排列 主轴和交叉轴（侧轴） 主轴为flex-direction属性对其的方式的方向 交叉轴为主轴的垂直方
CSS3弹性布局
最新发布
2401_86312870的博客
07-24 1420
未添加弹性布局添加弹性布局后。
弹性布局的主轴和交叉轴的区别
qq_43102118的博客
05-16 1959
弹性布局可以让块级元素横向显示，只要设置display:flex;就可以解决，也不会出现高度坍塌的问题。 弹性容器：定义了display:flex的那个元素。容器内部直接子元素进行弹性布局。简单的举个例子。 <style> #parent{ width:700px; border:2px solid red; display:flex; } #d1,#d2,#d3{ width:200px; height:200px; bo
什么是（flex）弹性盒子主轴和侧轴
qq_44716411的博客
08-18 2243
（flex）弹性盒子的主轴和侧轴 弹性盒子分为主轴和侧轴（又称交叉轴） 属性：flex-direction 主轴设置：flex-direction ：row 或row-reverse 主轴通俗来讲就是，X轴 侧轴设置：flex-direction ：column 或column-reverse 侧轴通俗来讲就是，y轴 ...
CSS-弹性盒子-主轴侧轴对齐方式
weixin_57936267的博客
05-17 5529
除了主轴和侧轴之外的弹性盒子相关元素以后再发文补齐，本章是弄清楚主侧轴的概念为主 一、基本概念 在开始之前，我们需要了解 Flex 和 主轴以及交叉轴（侧轴）别分是什么： 1.首先是Flex: Flex是Flexible Box的缩写，意味“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。 采用Flex布局的元素，称为Flex容器(flex container),简称“容器”。它所有的子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。.
css进阶三（弹性盒子布局）
qq_44872688的博客
10-19 1056
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
弹性容器----六大属性（5、项目在交叉轴上的对齐方式）
weixin_72303943的博客
08-13 305
弹性容器----六大属性（5、项目在交叉轴上的对齐方式）
CSS 弹性盒子
qq_27009517的博客
12-25 604
CSS 弹性盒子：使用 display: flex 定位两个盒子 这节会使用一种不同的挑战方式来学习一下如何更灵活地使用 CSS 布局元素。首先，我们会先用一个挑战解释原理，然后使用“弹性盒子”（flexbox）调整一个推文组件的样式来完成挑战。 只要在一个元素的 CSS 中添加display: flex;，就可以使用其他 flex 属性来构建响应式页面了。 为#box-container添加display属性，设置其值为 flex。 <style> #box-c...
弹性盒子模型（1)
thwr1881的博客
04-29 537
弹性盒子模型 1、布局模式： 通过之前的学习我们已经学习了两种布局模式，分别是Tbael布局和div+css的盒子模型，而除了这两种布局模式，还有一种布局模式就是弹性盒子模型布局，而弹性盒子模型( Flexible Box)则是CSS3新增的一种布局方式，是一种新的用于在HTML页面实现布局的方式。使得当HTML页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。弹性盒子模型依旧使用div，但需要将div的display属性变为flex。 2、基本属性 (1)容器(flex container)：是一
弹性盒模型
我是张跑跑
09-08 245
1 概述 不论是PC端还是手机端，网页的布局都是最基本也是最重要的！ 布局的一般解决方法，就是基于盒子模型，通过display属性+position属性+float属性进行布局。这能够解决大部分的布局问题，但是对一些特殊的布局就很不方便，比如实现垂直居中。 2009年，W3C提出一种新的方案，就是Flex布局，可以简单，完整且响应式地实现各种页面布局，目前已经支持所有的浏览器。 2 Flex布局 ...
清云小程序教程十五：主轴与交叉轴一
king3062211087的专栏
07-24 1267
原文链接：http://www.0575yun.com/articledetail/id/66.html 今天我们来介绍flex里非常重要的一个新概念——轴。那么在flex里面有2个轴，一个叫”主轴“；一个叫”交叉轴“。等会儿我们来看一下主轴和交叉轴有什么意义和作用，现在我们先来实现一种效果。 先改一下我们的”justify-content“： .container{ displa...
弹性盒 flex
weixin_47180815的博客
06-07 146
弹性盒 主轴(main axis) : 伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局。小心，它不一定是水平的; 这主要取决于“justify-项content”属性(详细见下文) 主轴起点(main-start) 和主轴终点( main-end)x: 伸缩项目放置在伸缩容器内从主轴起点(main-start) 向主轴终点(main-start) 方向。 主轴尺寸(mainsize): 伸缩项目在主轴方向的宽度或高度就是主轴的尺寸。伸缩项目主要的大小属性要么是宽度，要么是高度属性，由哪一个对着主轴方向
html中怎么理解弹性布局,网页css布局，如何理解flex弹性盒模型之主轴概念？
weixin_39900676的博客
07-14 325
本博客不欢迎：各种镜像采集行为，请尊重知识产权法律法规。大家都是程序员，不要闹得不开心。在最开始的互联网上的网页构成上，一般都是table的天下。后来的时候，流行的是css+div，鄙视table布局。那么，近些年来，很多前端已经开始大批量使用flex弹性盒模型，来组织页面。那么，在本文中，苏南大叔就实践一下flex布局的几个基本属性的用法。当然，这个flex弹性盒模型和传统的盒式布局区别很大。需...
CSS3 弹性盒子Flex详解
靜哥哥的博客
06-17 1063
1. Flex布局 Flex是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 在父元素中设置 display:flex; 即指定该容器使用弹性布局。 注意：设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 一些概念： 采用 Flex 布局的元素，称为 “Flex 容器”。 它的所有子...
《CSS学习笔记》弹性盒子
每天八杯水的博客
09-15 705
弹性盒子：让子元素显示在同一行。三种让多个div显示在同一行的方法
前端开发中或使用Bootstrap时,主轴、交叉轴(侧轴)的概念是什么？【使用类flex-column改变主轴方向为垂直方向】
昊虹AI笔记
09-27 797
前端开发中或使用Bootstrap时，交叉轴的概念是什么？
弹性盒子(Flex Box)详解
热门推荐
web$-小白
07-24 3万+
弹性盒子 ,flex display
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值