移动web第四天-修改主轴方向和对齐方式

最新推荐文章于 2024-09-13 23:32:49 发布

月薪一万二

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量190

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/Wangmou777_/article/details/121027987

版权

flex-direction: column; 修改主轴方向为垂直方向（默认的是水平方向）

修改完后，侧轴对应的方向随之发生改变，变为水平方向！

然后调整布局看想盒子在水平方向怎么移动，因为水平方向已经变为侧轴，所以命令按照侧轴的命令写。

现在弹性盒子水平居中就要修改侧轴的对齐方式

盒子就会水平居中！

反之想要修改盒子在垂直方向上的排列方式，就要写主轴的命令！

盒子就会垂直居中

难点：更换主轴方向和容易混乱该写什么命令实现布局！

记住想盒子在水平还是垂直方向布局，就看现在主轴和侧轴在什么方向。

比如想在垂直方向排列布局，现在的垂直方向是主轴，就写主轴的命令。

记住先想好自己想在什么方向排列布局，再看现在的方向对应的是什么轴

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

月薪一万二

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

移动Web开发（box-sizing | flex布局）

吴小花的博客

02-20

713

1.物理像素，CSS像素缩放改变的css像素的大小--物理像素的大小不会改变 PPI（dpi）:每英寸的物理像素点 2.viewport视口 <meta name="viewport" content="width=device-width"> 相当于 <meta name="viewport" content="initial-...

Web前端系列技术之移动Web开发（从基础开始）①

小柴爱程序的博客

08-14

1879

既然是需要开发移动端Web，那么首先需要了解的就是移动端Web开发和PC端Web开发的不同？如何开发移动端Web？在什么软件上进行开发？其实，就移动端和PC端而言，最大的不同就是设备的不同，由于设备不同，自然也就代表着宽高比例以及兼容性也不相同，所以在很多企业项目开发的过程中，都会将PC端网页和移动端网页进行分开开发；那么，开发移动端Web要做的就是需要合理的开发布局了，在开发的过程中，使用怎样的布局是会直接影响到用户体验以及产品生存空间的，所以在该如何开发移动端Web。......

参与评论您还未登录，请先登录后发表或查看评论

CSS篇-03 Flex布局基础讲解（一、主轴与侧轴的改变和对齐）

weixin_44552302的博客

12-20

4620

先了解几个东西： 1、伸缩容器和伸缩项 <ul> <li>1</li> <li>2</li> <li>3</li> </ul> 我想让li在ul中布局；这里ul是伸缩容器，li是伸缩项 2、伸缩容器的主轴和侧轴默认情况下：主轴起点为左，终点为右。侧轴起点为上，终点为下。 ...

web移动端之改变主轴排列方式

YasWestmere的博客

10-08

158

小白必看,简单易懂 web移动端之改变主轴排列方式

js基础知识

2301_76230410的博客

08-27

137

控制子项在侧轴（默认是y轴）上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码。5、space-between：先两边贴边，在平分剩余空间（重要，经常使用）if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码。控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用。条件语句，理解为判断，正确我执行代码1，错误执行代码2。4、stretch:拉伸（子元素不能设置高度）

【弹性布局】【设置主轴，交叉轴对齐方式】

m0_57517704的博客

09-12

2660

flex和flex-grow：分配剩余空间或者设置子元素的比例。space-evenly：每个元素两侧间隔相等，两边也相等。colum-reverse：主轴为垂直方向，起点在下边。space-between：两端对齐，中间元素间隔相等。row-reverse：主轴为水平方向，起点在右端。wrap-reverse：换行，第一行在下方。row（默认）：主轴为水平方向，起点在左端。flex-start（默认值）：轴起点对齐。flex-start：默认，交叉轴起点对齐。：父元素设置display：flex。

伸缩布局主轴上的对齐方式+注释

ITzhongzi的博客

02-06

1574

lang="en"> charset="UTF-8"> body{ background-color: #eee; } *{ margin:0; padding: 0; list-style: none; }

前端移动Web第二天：Flex伸缩布局-携程首页案例.zip

04-16

2. `justify-content`: 控制子元素在主轴上的对齐方式，包括`flex-start`（靠左/上）、`flex-end`（靠右/下）、`center`、`space-between`（两端对齐，中间间距相等）和`space-around`（各元素间间距相等）。...

前端移动Web第二天知识点：Flex伸缩布局.zip

04-16

在前端开发领域，移动Web设计是一项至关重要的技能。在当今多设备、多屏幕尺寸的环境中，灵活的布局设计显得尤为重要。本知识点聚焦于"Flex伸缩布局"，这是现代Web开发中实现响应式布局的一种强大工具。让我们深入...

移动web——学习笔记整理

Thaley的博客

01-22

3652

学习笔记整理——移动web(黑马的)

flexbox（四）伸缩布局中的margin&伸缩性&主轴对齐方式

11-19

4914

伸缩布局中的margin：当使用flex属性计算伸缩项目的宽度的时候，为auto的margin会值为0 在主轴（main axis）方向如剩余空间为正数，则剩余空间会被平均分配在拥有主轴方向auto margin(s)的flex元素之间。如剩余空间为负数，则将主轴方向的auto margin(s)设定为‘0’。在侧轴（cross axis）方向如果拥有侧轴

flex布局主轴元素单独设置对齐方式

热门推荐

qq_34109078的博客

04-28

1万+

今天用flex布局，想在主轴上设置某个flex-item右对齐，其他的左对齐，我以为直接用align-self属性就可以了，结果没效果，后来仔细阅读文档，发现align-self属性是用在单个元素的交叉轴的设置上，主轴元素没有找到设置单个元素的属性。我要的效果是这样的（主轴方向为水平方向）但是实际效果所有元素左对齐于是我就对最右边的元素设置以下css就成功了 .inline-field.inlin

css中创建主轴方向,CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体...

weixin_36258891的博客

08-03

1049

CSS3 在布局方面做了非常大的改进，对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开发中可以发挥极大的作用。(兼容性不好)必要元素：指定一个盒子为伸缩盒子 display:flex;设置属性来调整此盒子的子元素的布局方式：如 flex-direction；明确主侧轴及方向可互换主侧轴，也可改变方向各属性：设置主轴方向a) flex-direction：row(默认属性...

弹性盒子-修改主轴方向

weixin_57936267的博客

05-16

1350

代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&

前端入门css3-----修改弹性盒方向及调整主轴侧轴

m0_61656944的博客

01-20

1149

先看一个什么叫主轴和侧轴：第一个要先设置盒子是属于垂直排列还是属于水平排列：设置完盒子的排列方向，在去设置盒子的主轴和侧轴的方向：主轴的调整：侧轴的调整： ...

设置主轴方向和弹性盒子换行~~~~

weixin_57320268的博客

02-14

3535

1. 主轴默认是水平方向, 侧轴默认是垂直方向修改主轴方向属性: flex-direction 属性值作用 row 行, 水平(默认值) column *列, 垂直 row-reverse 行, 从右向左 column-reverse 列, 从下向上 flex-direction：column; 修改完毕，主轴是Y轴，侧轴是X轴。 2.弹性盒子换行特性：给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，

弹性盒模型-主轴方向设置

qq_35187942的博客

03-27

8874

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; } #box{ height: 200px; border: 1px s...

-webkit-box-reflect属性与倒影效果的实现

最新发布

读心悦

09-13

406

是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。

Vue使用query传参Boolean类型，刷新之后转换为String问题

q879936814的博客

09-12

396

要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。

设置主轴方向的弹性盒子元素对齐方式可以使用

06-03

算符号的 first 集合 private void computeFirstSets() { for (String production : productions) { String[] parts设置主轴方向的弹性盒子元素的对齐方式可以使用 `justify-content` 属性来实现。该属性 = production.split("->"); String left = parts[0].trim(); String[] right = parts[1].split("\\s用于控制弹性盒子元素在主轴方向上的对齐方式，包括以下值： 1. `flex-start`：将弹性盒子元素沿主轴的起始位置对齐。 2. `flex-end`：将弹性盒子元素沿主轴的结束位置对齐。 3. `center`：将弹性盒子元素沿+"); for (String symbol : right) { if (!firstSets.containsKey(symbol)) { firstSets.put(symbol, new HashSet<>主轴的中心位置对齐。 4. `space-between`：将弹性盒子元素沿主轴平均分配，两端不留空白。 5. `space-around`：将弹性盒子元素沿主轴平均分()); } if (!isNonTerminal(symbol)) { firstSets.get(symbol).add(symbol); break; } } 配，两端留有相等的空白。 6. `space-evenly`：将弹性盒子元素沿主轴平均分配，包括两端和元素之间的空白。例如，如果您想将弹性盒子 for (int i = 0; i < right.length - 1; i++) { String symbol = right[i]; if元素沿主轴居中对齐，可以这样设置： ```css .container { display: flex; justify-content: (isNonTerminal(symbol)) { Set<String> first = firstSets.get(right[i + 1]); if (first != null center; } ``` 在这个例子中，`.container` 为包含弹性盒子元素的容器，) { firstSets.get(symbol).addAll(first); } } } } } // 计算非终结设置了 `justify-content: center` 属性，使得弹性盒子元素在主轴方向上居中对齐。