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带来了前端开发自动适应布局的春天 ,但是我发现这个布局有个问题, 而且这个问题我无法解决: 描 ...
随机推荐
- 自定义Kubernetes调度程序来编排高可用性应用程序
自定义Kubernetes调度程序来编排高可用性应用程序 只要愿意遵守规则,在Kubernetes上进行部署和乘飞机旅行就可以很愉快.通常,事情会"正常工作".但是,如果有兴趣与必 ...
- gradle 混合编程java、scala、kotlin、groovy
众所周知,java是基于JVM的开发语言,但能够在JVM上运行的开发语言不仅仅有java,目前还有很热门的kotlin(kotlin不仅仅只能开发Android).scala.groovy等等.目前国 ...
- XML文件存在中文注释报错问题( 3 字节的 UTF-8 序列的字节 3 无效)
今天在做mybatis项目的时候,给映射文件添加了中文注释后,程序就报错.把中文注释删除后,程序又可以正常执行.解决方法在下文提到. 我的xml映射文件如下: <?xml version=&qu ...
- javascript中的设计模式
什么是设计模式 设计模式(Design Pattern)是一套被反复使用.多数人知晓的.经过分类的.代码设计经验的总结. 使用设计模式的目的:为了代码可重用性.让代码更容易被他人理解.保证代码可靠性. ...
- [源码解析] 深度学习分布式训练框架 horovod (3) --- Horovodrun背后做了什么
[源码解析] 深度学习分布式训练框架 horovod (3) --- Horovodrun背后做了什么 目录 [源码解析] 深度学习分布式训练框架 horovod (3) --- Horovodrun ...
- 【NX二次开发】Block UI 线条颜色/线型/宽度
属性说明 常规 类型 描述 BlockID String 控件ID Enable Logical 是否可操作 Group Logical ...
- 干货!MySQL 的 InnoDB 存储引擎是怎么设计的?
MySQL 里还有什么其他成员呢? 对于 MySQL,要记住.或者要放在你随时可以找到的地方的两张图,一张是 MySQL 架构图,另一张则是 InnoDB 架构图: 遇到问题,或者学习到新知识点时,就 ...
- 【无线通信篇01 | Zstack协议栈】CC2530 Zigbee Zstack协议栈组网项目及详细讲解篇
演示视频:https://www.bilibili.com/video/BV1Ew411o7Fp 物联网无线通信技术,ZigBee无线传感网络 CC2530最大的特点就是一个拥有无线收发器(RF)的单 ...
- NOIP模拟测试38「金·斯诺·赤」
金 辗转相减见祖宗 高精 #include<bits/stdc++.h> using namespace std; #define A 2000 #define P 1 #define N ...
- Bootstrap中宽度大于指定宽度时有空白的解决方法
<div class="container-fluid"></div> 其中container-fluid的作用是占100%