<!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. 《开发专家 Visual C 开发入行真功夫》笔记

    智能感知的功能,输入 is 后,同时按下Alt + →这两个键就出现了供选择变量.方法.宏等的列表,继续输入 in 后,isInit就出来了. stdafx.h预编译头文件,.h应用程序主头文件,do ...

  2. 记录第一次使用jni编译so包的入门操作

    1.配置 下载自己相对应的ndk平台版本后配置到studio 在local.properties加入路径 在gradle.properties文件添加 2.创建工具类(注意方法都是native的) 3 ...

  3. Q_UNUSED() 方法的使用

    Q_UNUSED() 没有实质性的作用,用来避免编译器警告 //比如说 int testFunc(int a, int b, int c, int d) { int e; return a+b+c; ...

  4. 【转】关于HTTP服务器每个客户端2个连接的限制

    http://www.cnblogs.com/lishenglyx/archive/2010/01/07/1641190.html 这两天猫在家里搞一个多线程的断点续传得C#程序,发现同时只能开2个线 ...

  5. MD5骨骼动画模型加载(一)

    前面我们分析了静态模型OBJ格式,桢动画模型MD2,这篇主要分析骨骼动画MD5的一些概念并且实现. 混合桢动画有计算简单,容易实现等优点,但是在需要比较细致的效果时,则需要更多的关键桢,每桢都添加相同 ...

  6. mysql 查看某个库下面某个表的所有列字段， columnName

    mysql 查看某个库下面某个表的所有列字段 select COLUMN_NAME as columnName from information_schema.COLUMNS where table_ ...

  7. Java Management Extensions (JMX) - Best Practices 最佳实践

    Java Management Extensions (JMX) - Best Practices 注意,本文一些管理可能与JMX API或JSR 77 (J2EE management)不一致.它们 ...

  8. Java如何以短格式显示月份？

    在Java中,如何显示短格式的月份名称? 使用DateFormatSymbols().DateFormatSymbols类的getShortMonths()方法,本示例显示了几个月的简写名称. pac ...

  9. ubuntu下查看windows的 txt 文件乱码

    在终端执行 gsettings set org.gnome.gedit.preferences.encodings auto-detected "['UTF-8','GB18030','GB ...

  10. SSH命令详解2

    ssh命令详解     目录         前言     一.ssh命令         1.Ssh参数解释         2.如何连接远程主机         3.利用Xstart 在windo ...