flex布局单元素侧轴从上至下单元素设置对齐

最新推荐文章于 2023-10-07 16:25:42 发布
最新推荐文章于 2023-10-07 16:25:42 发布
阅读量808 收藏 1
点赞数 3
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75141896/article/details/127903918
版权
本文介绍了如何使用CSS3的align-self属性实现Flex布局中单个元素在侧轴上的对齐，包括居中和底部对齐。通过示例代码详细解析了如何设置单个元素从上至下的对齐方式，并强调了align-self属性应用于子元素而非父元素的重要性。
摘要由CSDN通过智能技术生成

侧轴从上至下单元素设置方式

单元素是指父元素中的其中一个亲儿子

单个盒子对齐语法:align-self:(方向);方式

为了方便大家理解请参考坐标位置图 cab115e0cc9f4a799cc474dffddac683.png

 单元素设置盒子对齐方式  盒子移动是按照自己的起点默认位置进行从上到中间至下移动

接下来我们需要实现以下效果4d821594f3694744ab6375efad2fba1d.png

 实现盒子如此摆放的情况前提是盒子宽高1:1并且盒子是正方形  如果宽高不为一比一盒子不是正方形

效果就会是这样1308b9b760a24e01817ef4d214c73ac7.png

操作步骤创建结构摆盒子 参考图片224dfe22c3f94f8a96b2125e53cca66a.png 

结构展示图

最低0.47元/天 解锁文章
Kkni
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flex 布局详解
爪蛙没有爪的博客
01-30 374
flex-direction： 使用在display:flex的父容器里，改变横轴的方向： 1.flex-direction:row:默认值,从左到右 2.flex-direction:row-reverse:从右到左 3.flex-direction:column:从上到下 4.flex-direction:column-reverse:从下到上 flex-wrap： 使用在display:fl...
flex布局 父元素属性之 justify-content 主轴上子元素的排列方式
01-07
 justify-content：设置主轴上子元素的排列方式 justify-content 的属性值如下： 属性值 含义 flex-start 从主轴的头部开始排，主轴：x轴 左对齐；y轴 顶部对齐（默 认值） flex-end 从主轴的尾部开始排，...
flex布局（项目-即子级）
qq_30923455的博客
04-07 671
基本概念 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 项目的属性 以下6个属性设置在项目上。 orderflex-growflex-shrinkflex-basisflexalign-self 1.order属性：定义项目的排列顺
flex布局
m0_46483779的博客
02-28 509
flex布局 flex-设置主轴 justify-content: 是设置主轴上的子元素的排列方式; 添加display: flex;“改变文档流” 默认主轴是x 轴 行 row 那么y轴就是侧轴 flex-direction：row; row 默认值从左到右 row-reverse 从右到左 column 从上到下 column-reverse从下到上 display: flex; width: 80%; ...
CSS 小结笔记之解决flex布局边框对不齐
weixin_30822451的博客
10-15 493
在使用flex 进行伸缩布局的时候，经常会给子盒子设置边框，这时经常会出现上下边框对不齐的情况。本篇文章来探讨并解决这个问题。 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me...
VUE-flex布局之flex-wrap换行（3）
LzzMandy的博客
06-10 9030
1、外部容器display：flex； 可以设置的6个属性，如下： flex-direction 元素排列方向 flex-direction: row || row-reverse || column || column-reverse 元素排列方向: (从左往右)默认 || (从右往左) || (从上往下...
详解flex布局的元素如何分配容器的剩余空间
01-19
自从开始开学习 CSS 布局，想要比较灵活的把父元素的空间分配给各个子元一直是各个前端程序员的梦想。 在 flex 之前，如果不是专门去搜索相关的解决方案，一般人几乎想不出非常灵活的三（多）栏等高布局方案，而即使...
css3 flex布局实现平均分配元素的示例代码
11-20
在CSS3中，Flex布局（Flexible Box）是一种强大的布局模型，用于处理复杂的网页布局问题，尤其是在响应式设计中。它允许开发者更容易地控制容器内的子元素的排列、对齐和大小调整。本篇文章将深入探讨如何使用Flex...
flex弹性盒布局最后一行左对齐的实现思路
01-19
使用flex布局，如果是九宫格的话正好可以平分，如图 如果是我们只需要八块，如图 但是我们想让最后一块左对齐，依次排列，需要在元素的父级增加伪元素after，如图 <li></li> <li></li> <li></li> <li>...
flex布局实现上下固定中间滑动的布局方式
11-20
设置为`column`意味着子元素将沿着垂直方向从上到下排列。默认值是`row`，即水平方向排列。 4. **设置最外层div的高度为100%** 这样做可以使得最外层div填充整个视口高度，从而保证中间内容区域可以完全展示。 5....
Flex布局
一只不爱睡觉的懒猫
08-01 376
flex-direction flex-wrap flex-flow justify-content align-items align-content 属性 描述 row 横向排列 column 纵向排列 二、弹性项目内容对齐（justify-content） 属性 描述 flex-start 弹性项目向行头紧挨着填充 flex-end 弹性项目
Flex 布局语法教程
weixin_34127717的博客
12-29 77
一、Flex布局是什么？Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex; }复制代码行内元素也可以使用Flex布局。.box{ display: inline-flex; }复制代码Webkit内核的浏览器，必须加上-webkit前缀。.box{ display: ...
如何让flex布局中的一个子元素单独右侧对齐
weixin_55020138的博客
04-30 6251
flex布局中的一个子元素单独右侧对齐 我们可能会在 `Flexbox`容器中使用 `justify-self` 属性来实现子元素的水平对齐。但是，需要注意的是，`justify-self` 在 `Flex`布局中是无效的。 那么常见的做法是将子元素的 `margin-left` 设置为 `auto`。
flex布局实现垂直居中 上下两端对齐
热门推荐
Acitylion的博客
08-28 1万+
很多项目都会有这种页面 左面图片 右边是文字 之前我一般的做法就是用flex分为左右两部分 ，然后右边的的文字直接用边距把文字分开，但是有时候适配的话有的机型可能会有问题，然后我就查了一下flex有没有垂直居中的方法，然后发现了flex-flow这个属性，再也不用担心机型问题了 display:flex; flex-flow: column; //垂直排列 justify-content: space-between;//两端对齐 ...
flex_从入门到放弃
Nick_YangXiaoTong的博客
08-14 290
基本概念 main axis 水平的主轴 cross axis 垂直的交叉轴 main start 主轴的开始位置 main end 主轴的结束位置 cross start 交叉轴的开始位置 cross end 交叉轴的结束位置 main size 单个项目占据的主轴空间 cros...
flex布局从入门到上天
科技向善
01-07 423
来源：coderwhy老师 认识flex布局 flex布局是目前web开发中使用最多的布局方案： flex布局（Flexible布局，弹性布局） 目前特别在移动端用的最多，目前PC端也使用越来越多了 两个重要的概念： 开启了flex布局的元素叫flex container Flex container 里面的直接子元素叫做flex item 设置display属性味flex或者inl...
flex 布局：元素对齐
sayyy的专栏
10-07 180
略
flex布局（弹性布局）知识点总结
fangqi20170515的博客
03-31 3255
1、布局原理 flex是flexble Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们为父元素设为flex布局以后，子元素的float,clear和vertical-align属性失效。 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 2、flex布局父项常见属性 flex-direction:设置主轴方向 分为主轴和侧轴两个方向（行和列 x轴和y轴）。 主轴和侧轴实惠变
flex布局子元素自己右对齐
最新发布
07-01
在Flex布局中，如果想要让子元素在主轴（默认是左右方向）上右对齐，你可以使用`align-self: flex-end;`属性。这会将元素的基线（baseline）定位到父容器的最后一条基线，从而实现右对齐的效果。如果你需要所有子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值