html交叉轴排列,10-flex 项目交叉轴单独对齐

# flex 项目交叉轴单独对齐

## 1. `align-self`属性

- 该属性可覆盖容器的`align-items`, 用以自定义某个项目的对齐方式

| 序号 | 属性值 | 描述 |

| ---- | ------------ | ------------------------------ |

| 1 | `auto`默认值 | 继承 `align-items` 属性值 |

| 2 | `flex-start` | 与交叉轴起始线对齐 |

| 3 | `flex-end` | 与交叉轴终止线对齐 |

| 4 | `center` | 与交叉轴中间线对齐: 居中对齐 |

| 5 | `stretch` | 在交叉轴方向上拉伸 |

| 6 | `baseline` | 与基线对齐(与内容相关用得极少) |

---

## 示例

![](https://img.kancloud.cn/4e/60/4e609e72779fbc947a549a565a1bfa5c_394x252.jpg)

```html

flex 项目交叉轴排单独对齐

/* 容器尺寸 */

.container {

width: 300px;

height: 150px;

}

/* flex容器 */

.container {

display: flex;

}

/* flex项目 */

.item {

width: 50px;

height: 50px;

background-color: lightcyan;

font-size: 1.5rem;

/* align-self默认值 */

align-self: auto;

}

/* 自定义项目对齐方式 */

.item:first-of-type {

background-color: lightgreen;

/* 项目与容器等高, 否则看到不拉伸效果 */

height: inherit;

/* 项目拉伸以适应容器 */

align-self: stretch;

}

.item:nth-of-type(2) {

background-color: yellow;

/* 项目对齐到容器起始线*/

/*看不到效果是因为容器的`align-itmes默认就是flex-start */

align-self: flex-start;

}

.item:nth-of-type(3) {

background-color: pink;

/* 项目对齐到容器交叉轴终止线 */

align-self: flex-end;

}

.item:last-of-type {

background-color: lightskyblue;

/* 项目对齐到容器交叉轴中间线 */

align-self: center;

}

```

html交叉轴排列,10-flex 项目交叉轴单独对齐相关推荐

html交叉轴排列,CSS Flex 交叉轴水平方向
交叉轴是垂直方向还是水平方向,需要根据主轴方向(flex-direction: column),如果主轴是水平方向那么交叉轴为垂直方向,如果主轴方向垂直方向(flex-direction: colum ...
Web:移动商城首页的页眉和页脚的布局和flex项目三个属性
移动商城首页的页眉和页脚的布局先来演示一下flex项目三个属性 1.项目的缩放比例与基准宽度元素属性含义 flex 0 1 auto / initial 默认的,禁止放大,允许收缩,宽度自动 ...
Flex布局、flex容器和flex项目
1. Flex布局基础知识 ⑴ Flex弹性布局.任何一个HTML元素都可以指定为flex布局. Display:inline-flex; flex容器是内联块元素 Display:flex:flex ...
CSS3 flexbox 布局 ---- flex项目属性介绍
CSS3 flexbox 布局 ---- flex项目属性介绍现在介绍用在flex项目上的css 属性,html结构还是用ul, li 结构,不过内容改成1,2,3, 样式的话,直接把给 ul 设d ...
《软件项目管理（第二版）》第 10 章——项目收尾重点部分总结
文章目录前言一.讨论二.简答题总结前言学习了项目的开发与发布之后,我们就可以单独对一个项目进行开发了,但是在企业中开发中,除了编码之外,还需要项目管理.团队协作开发等,这就是软件项目管理板 ...
html溢出部分纵向滚动,html - 无法滚动到溢出包含的flex项目的顶部
html - 无法滚动到溢出包含的flex项目的顶部因此,在尝试使用flexbox创建一个有用的模式时,我发现了什么似乎是一个浏览器问题,我想知道是否有一个已知的修复或解决方法 - 或者如何解决它的 ...
eclipse建立Flex项目之Blazeds篇1(测试成功完整版)
创建Flex 与 Java 通信项目之Blazeds篇一.环境: 1.blazeds_turnkey(内含tomcat) 2.Flex Build3(Flex的eclipse插件) 3.Eclips ...
CSS弹性布局（排列方式、项目换行、主轴对齐方式）
在弹性布局里,父元素称为容器,子元素称为项目.项目排列由容器控制,控制属性都写在容器里.要使用弹性布局,要先使父元素display:flex; 例:以下写了项目的排列方式.项目换行.项目的对齐方式 & ...
第10章项目质量管理
目录 10.1 项目质量管理概论 10.2 规划质量管理 10.3 实施质量保证 10.4 质量控制补充上午考3分(质量管理的3个过程的定义和工具技术),下午案例分析考的概率大 10.1 项目质量 ...

html交叉轴排列,10-flex 项目交叉轴单独对齐

html交叉轴排列,10-flex 项目交叉轴单独对齐相关推荐

最新文章

热门文章