1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Document</title>
  7.   <style>
  8.   .flex-container {
  9.     display: flex;
  10.     width: 700px;
  11.     height: 400px;
  12.     background-color: gray;
  13.   }
  15.   .flex-item {
  16.     background-color: green;
  17.     width: 100px;
  18.     height: 100px;
  19.     margin: 5px;
  20.   }
  21.   /*align-self设置子盒子的排列方式，其属性值和父盒子的align-items的相同*/
  23.   .flex-item:nth-child(1) {
  24.     align-self: flex-start;
  25.   }
  27.   .flex-item:nth-child(2) {
  28.     align-self: center;
  29.   }
  31.   .flex-item:nth-child(3) {
  32.     align-self: flex-end;
  33.   }
  34. 	/*默认值*/
  35.   .flex-item:nth-child(4) {
  36.     height: auto;
  37.     align-self: stretch;
  38.   }
  40. 	/*基线对齐*/
  41.   .flex-item:nth-child(5) {
  42.     align-self: baseline;
  43.   }
  45.   .flex-item:nth-child(6) {
  46.     font-size: 30px;
  47.     align-self: baseline;
  48.   }
  49.   </style>
  50. </head>
  52. <body>
  53.   <div class="flex-container">
  54.     <div class="flex-item">flex item 1</div>
  55.     <div class="flex-item">flex item 2</div>
  56.     <div class="flex-item">flex item 3</div>
  57.     <div class="flex-item">flex item 4</div>
  58.     <div class="flex-item">baseline</div>
  59.     <div class="flex-item">baseline</div>
  60.   </div>
  61. </body>
  63. </html>

flexbox子盒子align-self属性的更多相关文章

  1. flexbox子盒子flex属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. flexbox子盒子order属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. flexbox父盒子align-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. flexbox父盒子flex-wrap属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. flexbox父盒子align-items属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. flexbox父盒子justify-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. flexbox弹性盒子模型

    这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...

  8. JD . 圆角矩形、权重层级、浮动撑开盒子及元素的默认间距、清除浮动、隐藏盒子、盒子的撑开与撑破、子盒子垂直居中|不占位置

    ---恢复内容开始--- 圆角矩形 border-radius:50%  40%  30%  33px:   像素.百分比.小数( 0.5 ) 左上.右上.右下.左下 权重: 标签 1 : 类选择器 ...

  9. flexbox 弹性盒子

    flexbox 弹性盒子 1.基本知识 container(容器)属性 flex-direction: row | row-reverse | column | column-reverse 属性决定 ...

随机推荐

  1. vbs中的"WScript.Network"[属性与方法]

    属性ComputerName                  计算机名UserDomain                    所属局域网域的域名UserName                 ...

  2. 服务器cpu过高修复：操作系统内核bug导致

    服务器cpu过高修复:操作系统内核bug导致修改系统内核参数/etc/sysctl.conf添加下面2条参数:vm.dirty_background_ratio=5vm.dirty_ratio=10

  3. LibreOffice openoffice 区别

    LibreOffice的初始版本号码被设置为与OpenOffice.org一致,故初始发布(2010年)即为第三版,并不存在第二版.第一版. 后来,甲骨文宣布停止OpenOffice.org的商业支持 ...

  4. 如何利用jsp实现防盗链功能

    index.jsp ----------------------------- Place your content here here is index jsp get header info a. ...

  5. 我对Web开发的认识

    前端 使用mvvm框架,每个视图维护自己的数据模型,更专注于视图模型及状态,在框架的帮助下规范视图与后端的交互及减轻工作量 我的选择是avalon.js 解耦前后端开发 自有资源独立管理,向后端开放资 ...

  6. mac配置--ant

    每次在新的电脑安装开发工具总是免不了下载各种软件和配置环境,本文针对mac下安装ant小结一下. 安装ant的方法很多,最直接的可以到apache-ant官网http://ant.apache.org ...

  7. FatJar in 创新实训 自然语言交流系统

    Fat Jar Eclipse Plug-In是一个可以将Eclipse JavaProject的所有资源打包进一个可执行jar文件的小工具,可以方便的完成各种打包任务,我们经常会来打jar包,但是e ...

  8. Axure RP Pro 7.0 注册码

    用户名:aaa注册码:h624pifAqt7It5e8boKkML+Y4RjDX5xknP4k7QktJYQoxsvv7VUS7hBCv/2ef45P

  9. 去掉WIN7 桌面图标的小箭头

    reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Shell Icons" ...

  10. Linux编程_Shell脚本练习题

    1,编写shell脚本,计算1~100的和. #! /bin/bash `;do sum=$[$i+$sum] done echo $sum 2,编写shell脚本,输入一个数字n并计算1~n的和. ...