<!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. jquery 发get post请求

    https://www.cnblogs.com/summers/p/3225375.html POST 方法不会缓存数据 $.get(URL,callback); 2个参数 callback 参数是请 ...

  2. 我对Web开发的认识

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

  3. linux update & upgrade

    Linux升级命令有两个分别是yum upgrade和yum update, 这个两个命令是有区别的: 复制代码 代码如下: yum -y update 升级所有包同时也升级软件和系统内核 复制代码 ...

  4. 磁盘映射： between 宿主机 and 客户机

    一.虚拟机映射到宿主机     在虚拟机关机的状态下,双击右侧设备栏里硬盘,在弹出的窗口中单击“实用程序“,选择“映射”.打开映射虚拟磁盘的窗口,其中的“卷”就是你希望映射虚拟机中的哪个分区到主机,如 ...

  5. e617. Determining the Opposite Component of a Focus Event

    The opposite component is the other component affected in a focus event. Specifically, in a focus-lo ...

  6. 嵌入式开发之zynq---Zynq PS侧sd驱动

    http://blog.chinaunix.net/uid-29404121-id-4217026.html http://blog.chinaunix.net/uid-29709984-id-430 ...

  7. Ubuntu -- 安装、卸载程序的命令

    通过sudo apt-get install xxxx 安装软件后,总是无法卸载干净,这里以Apache 为例,提供方法:首先sudo apt-get remove apache2再sudo apt- ...

  8. 初步了解学习将传统单机应用改造成Dubbo服务的过程

    Dubbo作为RPC框架,实现的效果就是调用远程的方法就像在本地调用一样.如何做到呢?就是本地有对远程方法的描述,包括方法名.参数.返回值,在Dubbo中是远程和本地使用同样的接口:然后呢,要有对网络 ...

  9. 解决Eclipse代码分析插件SonarLint在Console输出乱码问题

    在Eclipse安装目录下的eclipse.ini文件末尾加上一行   -Dfile.encoding=UTF-8   即可.

  10. Dubbo+Zookeeper+Spring整合应用篇-Dubbo基于Zookeeper实现分布式服务（转）

    Dubbo与Zookeeper.Spring整合使用 Dubbo采用全Spring配置方式,透明化接入应用,对应用没有任何API侵入,只需用Spring加载Dubbo的配置即可,Dubbo基于Spri ...