弹性盒子内容体居右对其_弹性盒子侧轴对齐方式

专业术语：

1.主轴和侧轴：

主轴、主轴方向：伸缩容器的主轴，伸缩项目主要沿着这一条轴进行布局，取决于justify-content，默认是水平的(即x轴方向) 如果justify-content：column则为纵向的(即为y轴方向)

侧轴、侧轴方向：与主轴垂直的轴称为侧轴，取决于主轴

2.伸缩容器和伸缩项目：

伸缩容器：设置display：flex的元素

伸缩项目：其下的子元素

案例：

代码：

效果：

默认值为auto：元素继承了它的父容器的 align-items 属性。如果父容器没有该属性则为 "stretch"。

1.给demo元素添加 align-self: center;(沿侧轴方向居中对齐)

2.给demo元素添加 align-self: flex-start;(沿侧轴方向起始位置对齐)

3.给demo元素添加 align-self: flex-end;(沿侧轴方向结束位置对齐)

4.给demo和demo1元素分别添加 align-self: baseline;(沿第一行文字对齐)

4.给demo和demo1元素添加 align-self: stretch;(元素被拉伸以适应容器。如果指定侧轴大小的属性值(默认侧轴为y轴，即指定侧轴大小的值为高度height值)为'auto'，则会被拉伸至盒子高度，若如果指定侧轴大小的属性值为固定值则不会被拉伸)

案例：

代码：

效果：

设置在容器上的属性align-items: flex-start | flex-end | center | baseline | stretch(默认值);(设置在容器上的对齐方式，会作用在所有子元素上)；

案例：

代码：

效果：

上述代码未添加任何对齐的样式所有效果均为默认值

1.为wrapper(父级div)添加align-items:center; 代表所有子元素沿侧轴居中，效果如下：

2.为wrapper(父级div)添加align-items: flex-end; 代表所有子元素沿侧轴底部对齐，效果如下：

3.为wrapper(父级div)添加align-items: flex-start; 代表所有子元素沿侧轴顶部对齐，效果如下：

4.为wrapper(父级div)添加align-items: baseline；代表所有子元素沿第一行文字对齐，效果如下：

5.为wrapper(父级div)添加align-items: stretch；(所有字元素被拉伸以适应容器。如果子元素指定侧轴大小的属性值(默认侧轴为y轴，即指定侧轴大小的值为高度height值)为'auto'，则会被拉伸至盒子高度，若子元素如果指定侧轴大小的属性值为固定值则不会被拉伸)

案例：

代码：

效果：

由于未给demo指定高度，因此它的高度被拉伸为容器的高度，demo1设定了高度因此不会拉伸

如果设置align-items为其他的值并且项目的高度未被设定则项目的高度由内容区撑开

弹性盒子内容体居右对其_弹性盒子侧轴对齐方式相关推荐

弹性盒子内容体居右对其_弹性盒子基本属性
一.CSS3弹性盒子弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox)子,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为 ...
弹性盒子内容体居右对其_CSS怎么实现弹性盒中的元素居中对齐
css实现元素对齐(居中对齐弹性盒的各项元素),在我们网页设计中是较为常见的一个功能效果.我们可以通过css中的align-items等相关css属性来实现. 推荐参考:<CSS教程> ...
4.设置主轴方向,背景图二倍图,弹性盒子换行,多行侧轴对齐方式
1.设置主轴方向主轴默认是水平方向 , 侧轴默认是垂直方向修改主轴方向属性: flex-direction <!DOCTYPE html> <html lang=" ...
弹性盒子display:flex——justify-content主轴方向对齐方式、align-items交叉轴对齐方式、 flex-direction修改主轴方向、flex-wrap换行
1.css3弹性盒子 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性盒布局模型的目的是提 ...
如何使微信小程序盒子内容居中显示
这个未设置之前的样式未修改之前的WXML代码<view class='container'><image class='user-avatar' src='/images/feng ...
弹性容器----六大属性（5、项目在交叉轴上的对齐方式）
弹性容器----六大属性(5.项目在交叉轴上的对齐方式) align-items属性定义项目在交叉轴(纵轴|侧轴)上如何对齐. 语法: .box {align-items: flex-start | ...
css设置图标居左_CSS text-align图片文字内容居左居右居中
CSS text-align之CSS居中(text-align:center).CSS内容居左(text-align:left).CSS文字居右(text-align:right)样式属性篇,图片.文 ...
android 光标居右,Android EditText内容右对齐，光标位于hint之后
打算写篇文章记录之前遇到的一个需求,如题.还特意写个demo运行一下,尴尬的是:只是在布局设置了android:gravity="center_vertical|end",就达到之 ...
html左侧td字体居右,如何在td中控制字体右对齐且加粗_html/css_WEB-ITnose
800 居右对齐已经实现了,怎么实现字体加粗呢 ?? 谢谢回复讨论(解决方案) 像这样的问题,楼主最好是先在网上找找答案!这才是好的学习方法 font-weight允许值 normal | bold ...

弹性盒子内容体居右对其_弹性盒子侧轴对齐方式

弹性盒子内容体居右对其_弹性盒子侧轴对齐方式相关推荐

最新文章

热门文章