学习整理--flex布局(1)
父元素容器属性
- flex-direction: row(默认)、row-reverse、column、column-reverse
row: 横向正序排列子元素
colimn: 竖向正序排列子元素
row-reverse 横向倒序排列子元素
column-reverse 竖向倒序排列子元素 - flex-wrap:nowrap(默认)、wrap、wrap-reverse
nowrap: 不换行(子元素强行等分容器宽度)
wrap: 换行(子元素固定宽度,超出即换行从顶部向下)
wrap-reverse: 同wrap,超出从底部向上换行 - flex-flow:flex-direction和flex-wrap的简写集合,默认为横向不换行
值==》flex-direction,flex-wrap - (设置x轴)justify-content:flex-start(默认)、flex-end、center、space-between、space-around、space-evenly
flex-start:左对齐
flex-end: 右对齐
center: 居中
space-between:左右两侧紧贴容器,子元素间距相同
space-around: 子元素间距为左右两侧距离容器边侧两倍值
space-evenly: 子元素间距与边距相同 - (设置y轴)align-items:flex-start、flex-end、center、baseline、stretch(默认)
stretch:子元素不设置高度(高度与容器相同)
flex-start:子元素紧贴容器顶部
flex-end: 子元素紧贴容器底部
center: 子元素居中排列
baseline: 以子元素第一行文字高度为基线排列 - align-content:flex-start、flex-end、center、space-between、space-around、space-evenly、stretch(默认)
控制多行项目对齐方式,只有一行不起作用
stretch:项目未设置高度或高度为auto时填满整个容器
flex-start、center、flex-end与align-items相同
space-around、space-between、space-evenly与justify-content相同
子元素属性
order(排列顺序)、flex-grow(是否放大)、flex-shrink(是否缩小)、flex-basis(设置width,权重高于width属性)、flex(缩放宽度属性集合)、align-self(继承父元素的align-items属性)
- order: 默认0,数值越小排列越靠前
- flex-grow: 默认0,有剩余空间时是否放大(默认不放大,值为数字)
- flex-shrink: 默认1,空间不足时等比缩小,为0时空间不足自身也不会缩小
- flex-basis: 默认auto,保持默认宽度或以width为自身宽度,值等同于width且权重高于width
- flex: 默认0 1 auto ,flex-grow、flex-shrink、flex-arsis集合缩写,定义项目放大、缩小、宽度
快捷值:auto(1 1 auto)等分放大缩小 none(0 0 auto)不放大,但等分缩小 - align-self: 默认auto(无父元素默认值为stretch),与align-items相同
学习整理--flex布局(1)的更多相关文章
- CSS 学习笔记 - Flex 布局
传统布局方式的局限性 传统的网页布局方式,采用 display + position + float 的方式来实现.这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性. 比如,最常 ...
- 今天学习了flex布局
前言:这个网站详细讲了水平.垂直.水平垂直的css方法.https://css-tricks.com/centering-css-complete-guide/ 布局的传统解决方案,基于盒状模型,依赖 ...
- HTML学习之Flex 布局
一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...
- flex布局元素操作详情
之前布局一直用的是 position,float之类的,趁着国庆学习一下 flex 布局 父元素: flex-direction: row row-reverse column column-reve ...
- display:flex 布局详解(2)
1. flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现 HTML代码: <div class=" ...
- 只需5分钟!一文读懂CSS布局(二) -- flex布局
目录 简介 基本概念 容器属性 1. flex-direction 测试代码 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6 ...
- 对Flex布局的总结与思考
阅读本文之前最好对flex布局有基本了解,可以通过"参考资料"中列举的资源来学习. flex布局规范的设计目标 一维布局模型(one-dimensional layout mode ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- Flex布局【弹性布局】学习
先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...
随机推荐
- js--history 对象详解
前言 我们浏览一个网页时可能不太会注意网页前进后退这些操作,但是在开发时你是否想过页面之间的跳转经历了什么,浏览器时怎么保存的页面信息,重新返回上一个页面的时候是否需要重新加载页面呢,会有很对疑问,要 ...
- [bzoj1222]产品加工
用f[i][j]表示完成前i个任务,在A机器上加工j小时时B机器上最少要工作多小时,转移就分为三种,即$f[i][j]=min(f[i-1][j-t1],f[i-1][j]+t2,f[i-t3]+t3 ...
- freeswitch verto communicator客户端
概述 我们在web客户端使用sip协议时用的比较多的是sipml5库和jssip库. 但是sip协议比较重,又复杂,所以freeswitch内部就自定义了一个verto协议,方便在web页面上使用音视 ...
- 51nod 1709 复杂度分析
51nod 1709 复杂度分析 考虑定义 $ F(x) $ 为 \(x\) 为根的子树所有点与 $ x $ 的深度差(其实就是 $ x $ 到每个子树内点的距离)的 1 的个数和. 注意,$ F(x ...
- python项目——新闻管理系统
DAO(Data Access Object) 数据访问对象是一个面向对象的数据库接口 控制台的输入输出都是再app.py里面完成的 mysql_db.py import mysql.connect ...
- Identity Server 4 从入门到落地(四)—— 创建Web Api
前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...
- CSS上下左右居中对齐
上下左右居中对齐 display: inline/inline-block 将父元素(容器)设定 text-align: center: 即可左右置中. display: block 将元素本身的 ...
- hadoop运行jar包报错
执行命令:[root@hadoop102 mapreduce]# hadoop jar mapreduce2_maven.jar Filter 错误信息:Exception in thread &qu ...
- kafka安装(单机版)
一.安装kafka(单机版) 因为现在的kafka安装包都自带zookeeper,所以如果是安装本地单机版kafka,不需要额外去安装zookeeper,使用自带的就可以了. 1.下载kafka 2. ...
- nextcloud搭建私有云盘
一.基础环境准备 1.安装一台centos7的linux服务器. # 系统初始化 # 如果时区不对,请修改时区 #mv /etc/localtime /etc/localtime_bak #ln -s ...