<!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. python 安装pycurl

    yum install libghc-gnutls-dev opnssl nss -y 126 yum install libghc-gnutls-dev -y 127 yum install htt ...

  2. SpringBoot2 添加应用拦截器

    项目参考:详细参见:<Spring Boot 2精髓:从构建小系统到架构分布式大系统> 第三章 3.6.1节 拦截器 MyWebMvcConfigurer package com.arch ...

  3. 神经网络权值初始化方法-Xavier

    https://blog.csdn.net/u011534057/article/details/51673458 https://blog.csdn.net/qq_34784753/article/ ...

  4. lapacke svd实例

    参考 intel MTK实例 https://software.intel.com/sites/products/documentation/doclib/mkl_sa/11/mkl_lapack_e ...

  5. SAP OBYC自动记账的实例说明 +VALUE STRING

    对Value String定义:定义了一系列的步骤优先顺序,每一个步骤都连接到不同的过账事务码,而这个顺序本身就称作价值串.价值串你可以看作是一种记账的规则,为物料移动或者发票校验包含了一系列的科目分 ...

  6. MongoDB MapReduce 小例子

    var map = function(){ if (this.gscode == "ZTJB"){ ymd = this.ymd; emit("maxymd", ...

  7. C++ namespace的用法

    //namesp.h namespace pers{     const int LEN = 40;     struct Person{         char fname[LEN];       ...

  8. WEB网页监控系统的设计框架思路具体解释

    提示:也能够直接在LCD上显示摄像头数据.这个參考luvcview源代码.设计思路思将YUV或者MJPEG格式的数据转换成RGB格式的数据,然后实现图片的缩放,图像缩放算法:点击这里!,然后写到fra ...

  9. Linux 限制用户远程SSH登录

    通过/etc/hosts.allow和/etc/hosts.deny两个配置文件远程限制某个IP和某段IP地址允许或拒绝访问Linux服务器 SSH.FTP.telnet等服务,其中/etc/host ...

  10. dubbo学习过程、使用经验分享及实现原理简单介绍

    一.前言 部门去年年中开始各种改造,第一步是模块服务化,这边初选dubbo试用在一些非重要模块上,慢慢引入到一些稍微重要的功能上,半年时间,学习过程及线上使用遇到的些问题在此总结下. 整理这篇文章差不 ...