<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  .flex-container {

    display: flex;

    width: 700px;

    height: 400px;

    background-color: gray;

  }

  .flex-item {

    background-color: green;

    width: 100px;

    height: 100px;

    margin: 5px;

  }

  /*align-self设置子盒子的排列方式，其属性值和父盒子的align-items的相同*/

  .flex-item:nth-child(1) {

    align-self: flex-start;

  }

  .flex-item:nth-child(2) {

    align-self: center;

  }

  .flex-item:nth-child(3) {

    align-self: flex-end;

  }

	/*默认值*/

  .flex-item:nth-child(4) {

    height: auto;

    align-self: stretch;

  }

	/*基线对齐*/

  .flex-item:nth-child(5) {

    align-self: baseline;

  }

  .flex-item:nth-child(6) {

    font-size: 30px;

    align-self: baseline;

  }

  </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 class="flex-item">flex item 4</div>

    <div class="flex-item">baseline</div>

    <div class="flex-item">baseline</div>

  </div>

</body>

</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. Material Design 相关资源

    Materialpalette -- Material配色工具 Materialup -- Material设计灵感: Material Design 相关好文: <超全面总结!深聊MATERI ...

  2. Ubuntu下允许Root用户的操作 （图形界面登录、su切换……）

    Ubuntu安装后,root用户默认是被锁定了的,不允许登录,也不允许“su”到 root.虽然这样的设置使安全性更高一些,但对于开发者来 说就显得很不方便了.如何让Ubuntu允许root用户直接登 ...

  3. 关于Unity中常用的数据结构和JSON处理(专题三)

    数据结构通俗来讲就是用某个对象去存储数据集合,比如要存储100个整数,要用什么样的数据类型能把它们存储好. Jason处理,服务器对接,配置文件的使用,Unity和Jason之间相互的转换. Arra ...

  4. 初试PyOpenGL一 (Python+OpenGL)

    很早就一直想学Python,看到一些书都有介绍,不管是做为游戏的脚本语言,还是做为开发项目的主要语言都有提及(最主要的CUDA都开始支持Python,CUDA后面一定要学),做为先熟悉一下Python ...

  5. Apple iOS MDM service 简介

    Apple iOS MDM service 簡介 藉由MDM服務,企業可以用來控管配發給員工的iOS Device.可以採用Apple官方推出的工具,也可以採用第三方開發的服務. MDM server ...

  6. (笔记)Mysql命令select：当前选择（连接）的数据库

    select命令表示当前选择(连接)的数据库. select命令格式:mysql> select database(); MySQL中SELECT命令类似于其他编程语言里的print或者writ ...

  7. linux下硬盘的分区：

    提到硬盘的分区,以前就是很乱,有什么主分区/扩展分区/逻辑分区等;它们有什么区别呢?现在简单的了解一下: 由于在MBR的主引导记录中的分区表里面最多只能记录4个分区记录,这个不够用啊,为了解决这个问题 ...

  8. JDBC删除数据库实例

    在本教程将演示如何在JDBC应用程序中删除一个指定的数据库. 在执行以下示例之前,请确保您已经准备好以下操作: 具有数据库管理员权限,以在给定模式中创建数据库. 要执行以下示例,需要用实际用户名和密码 ...

  9. WCF Service 配置文件注释(转)

    VS 2008 SP1(不确定是否不打SP1是否有)自带的一个编辑工具,可以更快的帮助定制配置文件, 以前看到过没有注意, 昨天正好一个同事提起, 这里记录一笔:打开VS 2008->Tools ...

  10. mysql监控工具sqlprofiler，类似sqlserver的profiler工具

    最近无意发现了mysql的客户端监控工具“Nero Profile SQL”,刚开始还不知道怎么使用,经过半小时摸索,现将使用步骤写下来. 背景:开发的时候,如果数据存储层这块使用EF,或者其他orm ...