flexbox父盒子align-items属性
2017-07-30 20:01
162 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .flex-container { display: flex; /*整体上对齐*/ /*align-items: flex-start;*/ /*整体垂直居中*/ /*align-items: center;*/ /*整体下对齐*/ /*align-items: flex-end;*/ /*默认值:当子盒子没有设置高度时,子盒子高度拉伸至和父盒子同高*/ /*align-items: stretch;*/ /*当文字大小不一时,子盒子以较大文字的基线对齐,不常用*/ align-items: baseline; width: 400px; height: 400px; background-color: gray; } .flex-item { background-color: green; width: 100px; height: 100px; margin: 5px; } .flex-item:nth-child(1) { font-size: 20px; } .flex-item:nth-child(2) { font-size: 30px; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> </div> </body> </html>
相关文章推荐
- Flexible 弹性盒子模型之CSS align-items 属性
- css弹性盒模型属性align-items与justify-content
- flexbox父盒子flex-wrap属性
- Flexible 弹性盒子模型之CSS align-self 属性
- css3中 resize 、outline-offset、outline align-items属性 inherit和auto的区别
- flexbox父盒子flex-direction属性
- 伸缩盒子子中align-items与align-content和justify-content的区别
- flex布局justify-content属性和align-items,align-self属性
- HTML5基础加强css样式篇(伸缩容器属性:flex-direction, flex-wrap,flex-flow,align-items,align-content)(五十三)
- Flex布局中的align-items属性和align-content属性的区别
- flexbox子盒子align-self属性
- 【CSS】【10】CSS盒子clear属性和高度
- CSS 的 vertical-align 属性
- ListView.Items 属性
- CSS vertical-align 属性
- inline-block 导致元素下沉 解决方法添加vertical-align:middle属性
- vertical-align属性学习记录
- Sencha Touch 2 - Dataview里面实现items迭代并初始化items的一些属性
- CSS text-align 属性