css align-items的测试

测试源代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jerry 测试</title>
<style>
#main {width: 220px;height: 300px;border: 1px solid black;display: flex;
}#main div {flex: 1;
}
</style>
</head>
<body><div id="main"><div style="background-color:coral;">RED</div><div style="background-color:lightblue;">BLUE</div><div style="background-color:lightgreen;">Green div with more content.</div>
</div>
</body>
</html>

加一行align-items: center

stretch: 默认值。元素被拉伸以适应容器。
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
center: 元素位于容器的中心。
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

更多Jerry的原创文章，尽在：“汪子熙”:

css align-items的测试相关推荐

mysql 左对齐_CSS：左对齐标签，右对齐(CSS : Align label left, text right)
CSS:左对齐标签,右对齐(CSS : Align label left, text right) 我有这样的文字: AAA : aaaaaaaaaaaaaaaaaa B : bbbbb CCCCC ...
css overflow属性的测试
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow 看一些实际测试效果: visible: 超过范围的区域仍然能显示 hidden: 超 ...
为什么css效果在本地测试没问题,上传到服务器后却显示位置乱动,css下拉菜单本地正常，上传后360浏览器中显示错位，火狐、IE8显示正常...
匿名用户 1级 2014-04-15 回答首先你使用 #header .row-2 ul li:hover 这样ie6就不支持了.ie6支持的hover目前我知道的只有a标签. 要单纯用css实现下 ...
HTML + CSS（在线HTML测试）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
学习日记——H5+CSS周测1测试错题整理
1.<a>的伪类选择符不包括 A a:link B a:onfouce C a:visited D a:onclick 正确答案: B,D 2.下列哪些标准是由W3C(万维网联盟)制 ...
css inset默认值,测试CSS3 clip-path属性的不同inset值的效果
CSS 语言: CSSSCSS 确定 .test { float: left; overflow: hidden; position: relative; margin: .25em; height: ...
前端面试题---html/css
文章目录 1. html标签的类型(head, body,!Doctype) 他们的作用是什么 2. 在head标签里面的标签的作用分别是啥? 3. 在 HTML 中插入 css 样式表的方法 4. ...
css/div/兼容性及常见bug
css+div基础 css 清除浮动的几种方法 css省略号 css文字排版方向 html 盒子水平垂直居中 px.em.em的区别 src和href的区别 link和@import的区别定位的区别 ...
css flexbox模型_5分钟内学习CSS Flexbox-初学者教程
css flexbox模型快速介绍流行的布局模块 (A quick introduction to the popular layout module) In this post, you'll l ...
css 水平垂直居中实现方式
css 水平垂直居中实现方式 css中有好多实现居中的方式,在项目中经常不知道使用哪种方式会比较好,所以记录下来. 水平垂直居中包括行内元素居中,以及块级元素居中行内元素html结构 <div ...

css align-items的测试

css align-items的测试相关推荐

最新文章

热门文章