<!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. nodejs应用在linux服务器中的部署

    1.(可选)添加用户: addgroup wmui添加用户组useradd -d /home/wmui -s /bin/bash -m wmui创建wmui用户passwd wmui设置密码,如果忘记 ...

  2. 遍历QMap引发异常处理

    引言 用常规方法遍历QMap,删除满足条件元素时出现“读取位置0xXXX时发生访问冲突”.查看“调用堆栈”指向QMap<int,int>::iterator::operator++()和Q ...

  3. Qt判断操作系统代码

    Qt4的时候是如下宏定义.Qt5,有所不同.   #include <QtGlobal> ... #ifdef Q_OS_MAC // mac #endif #ifdef Q_OS_LIN ...

  4. 如何利用pyCharm编写和运行python文件

    在安装python环境后,通常可以利用IDE pyCharm来编译我们的python文件.创建一个python文件夹,用pyCharm打开文件夹,在文件夹中新建一个python文件demo.py 也许 ...

  5. Mayi_XPath编写规则学习

    XPath编写规则学习   辅助工具:firefox安装findbugs,view Xpath firefox :Xpath验证方式:$x("xpath"); 粘贴xpath语句回 ...

  6. 捋一捋Spring Web的源码思路

    Servlet前提 Java规定了Servlet Container为每一个web app创建一个Servlet Context:而Servlet Context中又包含了诸多Servlet -- 其 ...

  7. VIM下的普通模式的相关知识

    什么为一次操作? 从进行插入模式开始,直到返回普通模式为止,在此期间的任何修改都视为一次操作:   使用 u 可以撤销最新的修改: 所以呢,控制好在插入模式的操作就可以控制好撤销命令的粒度: 另外,最 ...

  8. u3d changeTexs

    using UnityEngine; using System.Collections; using System.Collections.Generic; public class CTex : M ...

  9. CentOS 7下彻底卸载MySQL数据库

    转载: https://zhangzifan.com/centos-7-remove-mysql.html

  10. NFS介绍 NFS服务端安装配置 NFS配置选项

    NFS 介绍 • NFS是Network File System的缩写 • NFS最早由Sun公司开发,分2,,4三个版本,2和3由Sun起草开发,.0开始Netapp公司参与并主导开发,最新为4.1 ...