CSS-弹性布局2-交叉轴

4.5 align-items

该属性定义项目在交叉轴上如何对齐。

属性值	说明
stretch（默认值）	如果项目未设置高度或者设为auto，将占满整个容器高度
baseline	项目的第一行文字的基线对齐
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐

源代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flex-wrap</title><style type="text/css">.wrap{width: 200px;display: flex;flex-direction: row;flex-wrap: wrap;height: 200px;align-items: stretch;border: 1px solid red;}div{width: 20px;margin : 5px;}.div1{padding-top: 10px;background: red;}.div2{background: blue;}.div3{background: yellow;}</style>
</head>
<body><div class="wrap"><div class="div1">测试文字1</div><div class="div2">测试文字22</div><div class="div3">3</div></div>
</body>
</html>

stretch运行结果

stretch运行结果

baseline运行结果

baseline运行结果

flex-start运行结果

flex-start运行结果

flex-end运行结果

flex-end运行结果

center运行结果

center运行结果

**4.7 align-content **
该属性定义了多跟轴线的对齐方式。如果项目只有一根轴线，则该属性不起作用。

属性值	说明
stretch(默认值)	轴线占满整个交叉轴
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等。所以轴线之间的间隔比边框的间隔大一倍

源代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flex-wrap</title><style type="text/css">.wrap{width: 200px;display: flex;flex-direction: row;flex-wrap: wrap;height: 200px;align-content: stretch;border: 1px solid red;}div{width: 50px;margin:5px;}.div1{background: red;}.div2{background: blue;}.div3{background: yellow;}.div4{background: green;}.div5{background: gray;}</style>
</head>
<body><div class="wrap"><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div><div class="div4">4</div><div class="div5">5</div></div>
</body>
</html>

stretch运行结果：

stretch运行结果

flex-start运行结果：

flex-start运行结果

flex-end运行结果：

flex-end运行结果

center运行结果：

center运行结果

space-between运行结果：

space-between运行结果

space-around运行结果：

space-around运行结果

CSS-弹性布局2-交叉轴相关推荐

一、CSS弹性布局[弹性盒子、弹性元素]
一.CSS弹性布局 1.弹性盒子弹性盒子的属性全都是写在父元素上面 1.1基础解释:在父元素上写上display:flex;或者display:inline-flex;子元素就会出现弹性效果,其中 ...
前端css弹性布局各种属性
前端css弹性布局各种属性一.基本概念 Flexbox 是 flexible box 的简称(注:意思是"灵活的盒子容器")又叫弹性布局,是 CSS3 引入的新的布局模式.它决定 ...
css弹性布局多个div居中多行锤子水平居中万能方案
css弹性布局多行锤子水平居中万能方案任何一个容器可以指定为flex布局,但是td和th等标签本身已有布局,所以重写display属性会使元素失去原有的布局特性 *{display:flex} ...
使用css弹性布局，让页面footer底部固定
在前端开发过的工作中,footer永远固定在底部的需求.也就是说一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏 ...
css弹性布局自动换行怎么实现,网页设计常用布局之CSS弹性布局
#网页设计#在网页设计中内容的排版和布局往往是整个设计工作的重点和难点,如果能熟练掌握CSS弹性布局的话,无论是页面的整体设计还是局部内容的布局,都能起到事半功倍的效果.尤其是对非专业的或刚开始从事前 ...
css弹性布局笔记一（垂直居中、水平居中、居中）（display:flex）
CSS弹性布局,需要一个容器,容器中至少包含一个以上的元素,以下代码包含子元素垂直居中.水平居中.居中三种情况 <html> <head> <style type=&qu ...
前端css弹性布局，响应式布局，多列布局
前端css弹性布局,响应式布局,多列布局主页 <!DOCTYPE html> <html><head><meta charset="utf-8&q ...
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
目录前言 Flex 布局是什么? Flex 简介 Flex 容器属性 Flex 基本使用场景一 flex-direction 场景二 justify-content align-it ...
css弹性布局和网格布局
css布局一.知识补充 1. 浮动的特性只会影响后面的元素文本不会被浮动元素覆盖(浮动的特性就是图文混合) 具备内联盒子特性:宽度由内容决定具备块级盒子特性:支持所有样式浮动放不下,会自动折 ...
CSS弹性布局网格布局
一.Flexbox 弹性框布局模块,可更轻松设计灵活的响应式布局,而无需使用浮动或定位. 首先应给容器设置display 属性 <div class="flex-container&q ...

CSS-弹性布局2-交叉轴

4.5 align-items

CSS-弹性布局2-交叉轴相关推荐

最新文章

热门文章