<!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. mybatis中的#{}和${}区别

    mybatis中的#{}和${}区别 2017年05月19日 13:59:24 阅读数:16165 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #use ...

  2. css样式冲突问题练习例子

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org ...

  3. apt-get 命令加 autoclean clean autoremove 区别

    下面总结一下有关apt-get的常用但容易混淆的指令: apt-get autoclean:   www.2cto.com       如果你的硬盘空间不大的话,可以定期运行这个程序,将已经删除了的软 ...

  4. 关于Unity中自带摇杆与车轮碰撞器的使用

    准备 在创建好项目目录的基础上 导入一个第三方的资源包,在Project面板里面 右键---->Import Package---->Custom Package---->easy_ ...

  5. C++标准 bind函数用法与C#简单实现

    在看C++标准程序库书中,看到bind1st,bind2nd及bind的用法,当时就有一种熟悉感,仔细想了下,是F#里提到的柯里化.下面是维基百科的解释:在计算机科学中,柯里化(英语:Currying ...

  6. 【Python】windows电脑 python3.6安装lxml库

    1.下载lxml的wheel文件 https://download.lfd.uci.edu/pythonlibs/t5yhk4lc/lxml-4.2.1-cp36-cp36m-win32.whl 其他 ...

  7. Failed to import package with error: Couldn't decompress package的解决方案

    问题的出现 在Unity中导入一个Package文件,出现以下出错信息 解决方案 遇到这样的报错信息,一般就是要将该文件包的存储路径设置为英文,因为Unity不识别中文路径:其次对文件包的命名中间应没 ...

  8. 第三百四十九节，Python分布式爬虫打造搜索引擎Scrapy精讲—cookie禁用、自动限速、自定义spider的settings，对抗反爬机制

    第三百四十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—cookie禁用.自动限速.自定义spider的settings,对抗反爬机制 cookie禁用 就是在Scrapy的配置文件set ...

  9. e793. 监听JSpinner数据变化

    // Create a nummber spinner JSpinner spinner = new JSpinner(); // Add the listener spinner.addChange ...

  10. Blog

    http://www.cnblogs.com/digdeep/archive/2015/11/16/4968453.htmlhttp://it.dataguru.cn/article-8406-1.h ...