flex布局制作自适应网页
网页布局是css的一个重点应用。传统的布局都是依赖display、position、float属性来实现的,但是特殊布局就不易实现,如垂直居中。
01 flex布局是什么?
Flex 是 Flexible Box的简写,意为“弹性布局”为盒模型提供最大灵活性。任何一个容器都可以指定为flex布局。
采用flex布局的元素,称为flex容器。他的所有子元素自动成为容器成员,称为flex项目,简称项目。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
02容器的属性
flex-direction 设置排列方向(向下、向上、向左、向右)的
flex-wrap 内容放置不下时换行方式
flex-flow 是flex-direction和flex-wrap属性简写默认值row nowrap
justify-content 定义在主轴上的对齐方式。
align-items 定义项目在交叉轴上如何对齐。
align-content 定义多根轴线的对齐方式
flex-direction属性值有四个:
row(默认值):水平方向,从左到右,起点在左。
row-reverse:水平方向,从右到左,起点在右。
column:垂直方向,从上到下。
column-reverse:垂直方向,从下到上。
flex-wrap属性值有三个:
nowrap:不换行。
wrap:正常换行,在第一行下方。
wrap-reverse:换行,在第一行上方。
justify-content属性值有五个:
flex-start(默认值):左对齐
flex-end:右对齐
center:居中
space-between:两端对齐
space-around:每个项目两侧的间隔相等。
align-items属性值有五个:
flex-start:交叉轴的起点对齐。
flex-end:交叉轴终点对齐。
center:交叉轴中点对齐。
baseline:项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设置为auto,将占满整个容器的高度。
align-content属性值六个:
flex-start:交叉轴的起点对齐。
flex-end:交叉轴终点对齐。
center:交叉轴中点对齐。
space-between:与交叉轴两端对齐,轴线之间间隔平均分布。
space-around:每根轴线两侧间隔都相等。
stretch(默认值):轴线占满整个交叉轴。
03项目属性
order:定义项目的排列顺序,数值越小,排列越靠前,默认为0。
flex-grow属性:定义项目的放大比例,默认为0
flex-shrink:定义项目的缩小比例,默认为1。
flex-basis:定义在分配多余空间之前,项目占据的主轴空间。默认值为auto,即项目本来大小。
flex:是flex-grow、flex-shrink、flex-basis的缩写,默认值0 1 auto。
align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
flex布局制作自适应网页的更多相关文章
- 慕课网5-2编程练习:flex布局制作卡片布局案例
慕课网5-2编程练习:flex布局制作卡片布局案例 小伙伴们,学习了卡片布局,接下来我们根据效果图,也写出一个卡片布局的页面吧! 效果图如下: 任务 1.主体内容的卡片一行只能显示两个. 2.卡片与卡 ...
- Flex布局做出自适应页面--语法和案例
本文发布在: github项目地址:https://github.com/tenadolanter/flex-layout-demo SegmentFault地址:https://segmentfau ...
- Flex 布局教程
今天给大家分享一下flex布局的语法 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于 ...
- display:flex 布局详解(2)
1. flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现 HTML代码: <div class=" ...
- 利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...
- flex 布局 input 宽度不自适应
flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!
- flex布局嵌套之高度自适应
查遍各大资源无任何flex嵌套布局的例子,经过自己折腾完成了项目中的高度自适应需求(更多应用于前端组件) 效果图: html代码:(关键地方已经用颜色特别标识 ^_^) <!DOCTYPE ht ...
- 实现网页布局的自适应 利用@media screen
利用@media screen实现网页布局的自适应,IE9一下不支持 @media screen /*1280分辨率以上(大于1200px)*/ @media screen and (min-widt ...
- flex布局无法自动适应的bug以及实现textarea根据内容自适应
-webkit-box布局无法自动适应高度的bug css3的新属性display:-webkit-box带来了前端开发自动适应布局的春天 ,但是我发现这个布局有个问题, 而且这个问题我无法解决: 描 ...
随机推荐
- RMAN CROSSCHECK命令 说明
CROSSCHECK命令: 用于核对磁盘和磁带上的备份文件,以确保RMAN资料库与备份文件保持同步.注意:该命令只会检查RMAN资料库所记载的备份文件.当执行crosscheck命令时,如果资 ...
- 华为4D成像雷达、智能驾驶平台MDC 810
华为4D成像雷达.智能驾驶平台MDC 810 2020年10月底,华为发布了HI品牌,在今年2021年上海国际车展前夕,华为以 "专新致智" 为主题,举办HI新品发布会,发布了包括 ...
- 卷积神经网络(CNN,ConvNet)
卷积神经网络(CNN,ConvNet) 卷积神经网络(CNN,有时被称为 ConvNet)是很吸引人的.在短时间内,变成了一种颠覆性的技术,打破了从文本.视频到语音等多个领域所有最先进的算法,远远超出 ...
- SystemML大规模机器学习,优化算子融合方案的研究
SystemML大规模机器学习,优化算子融合方案的研究 摘要 许多大规模机器学习(ML)系统允许通过线性代数程序指定定制的ML算法,然后自动生成有效的执行计划.在这种情况下,优化的机会融合基本算子的熔 ...
- TensorRT 3:更快的TensorFlow推理和Volta支持
TensorRT 3:更快的TensorFlow推理和Volta支持 TensorRT 3: Faster TensorFlow Inference and Volta Support 英伟达Tens ...
- adb基础命令
adb运行原理: 启动一个 adb 客户端时,此客户端首先检查是否有已运行的 adb 服务器进程.如果没有,它将启动服务器进程.当服务器启动时,它与本地 TCP 端口 5037 绑定,并侦听从 adb ...
- 10: java数据结构和算法: 构建哈夫曼树, 获取哈夫曼编码, 使用哈夫曼编码原理对文件压缩和解压
最终结果哈夫曼树,如图所示: 直接上代码: public class HuffmanCode { public static void main(String[] args) { //获取哈夫曼树并显 ...
- Spring Cache缓存技术,Cacheable、CachePut、CacheEvict、Caching、CacheConfig注解的使用
前置知识: 在Spring Cache缓存中有两大组件CacheManager和Cache.在整个缓存中可以有多个CacheManager,他们负责管理他们里边的Cache.一个CacheManage ...
- 01 . Varnish简介,原理,配置缓存
简介 Varnish是高性能开源的反向代理服务器和HTTP缓存服务器,其功能与Squid服务器相似,都可以用来做HTTP缓存.可以安装 varnish 在任何web前端,同时配置它缓存内容.与传统的 ...
- Django(68)drf分页器的使用
前言 当后台返回的数据过多时,我们就要配置分页器,比如一页最多只能展示10条等等,drf中默认配置了3个分页面 PageNumberPagination:基础分页器,性能略差 LimitOffsetP ...