flexbox子盒子align-self属性
<!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属性的更多相关文章
- flexbox子盒子flex属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flexbox子盒子order属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flexbox父盒子align-content属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flexbox父盒子flex-wrap属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flexbox父盒子align-items属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flexbox父盒子justify-content属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flexbox弹性盒子模型
这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...
- JD . 圆角矩形、权重层级、浮动撑开盒子及元素的默认间距、清除浮动、隐藏盒子、盒子的撑开与撑破、子盒子垂直居中|不占位置
---恢复内容开始--- 圆角矩形 border-radius:50% 40% 30% 33px: 像素.百分比.小数( 0.5 ) 左上.右上.右下.左下 权重: 标签 1 : 类选择器 ...
- flexbox 弹性盒子
flexbox 弹性盒子 1.基本知识 container(容器)属性 flex-direction: row | row-reverse | column | column-reverse 属性决定 ...
随机推荐
- ansible 配置了端口在host文件但是还要走22 ip:60001 ansible_ssh_port=60001
fatal: [101.251.194.102]: UNREACHABLE! => {"changed": false, "msg": "Fai ...
- js学习（一）-动态添加、修改、删除对象的属性和方法
//-----------------------js代码--------------------------- function class1(){ } //-------------------- ...
- IIS字体文件添加MIME映射
在前端经常会做这样一件事情,页面会加载一些特殊的字体或者是图标文件,常用的比如:.woff.woff2..ttf..svg..otf..eot...如果没有添加MIME映射会报404的错误,IIS错误 ...
- 链接按钮LinkButton（按钮组）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Java虚拟机（JVM）体系结构概述及各种性能参数优化总结
转自:http://blog.csdn.net/zhongwen7710/article/details/39213377 第一部分:相关的概念 数据类型 Java虚拟机中,数据类型可以分为两类:基本 ...
- VIM中一些按键的作用：
表示范围的命令: l: 表示一个字符,可以于操作符组合使用: aw :表示一个单词: 不会count 空格: 前面可以加数字的: iw: 选中一些单词, 会包括空格: 前面可以加数字: ap: 表 ...
- SpringBoot系列五：SpringBoot错误处理（数据验证、处理错误页、全局异常）
声明:本文来源于MLDN培训视频的课堂笔记,写在这里只是为了方便查阅. 1.概念: SpringBoot 错误处理 2.具体内容 在之前的程序里面如果一旦出现了错误之后就会出现一堆的大白板,这个白板会 ...
- LeetCode224——Basic Calculator
Implement a basic calculator to evaluate a simple expression string. The expression string may conta ...
- ubuntu14.04安装好用的google拼音输入法
装了ubuntu14.04后感觉自带的拼音输入法不好用的有没有,有些字拼不出来有没有...,其实我们安装google拼音输入发就会好很多... 方法/步骤 安装google拼音输入法 $sud ...
- C# Bitmap/png转成jpg格式，压缩图片
public static ImageCodecInfo GetEncoder(ImageFormat format) { ImageCodecInfo[] codecs = ImageCodecIn ...