h5c3 part6 flex

1. animation: name duration delay timing-function count forwards

@keyframes name {
0% === from{
}
100% === to{

}
}

没有延迟
animation-fill-mode: forwards 0%动画不会立即执行, 结束时会停留在结束状态
backwards 0%动画会立即执行, 结束时不会停留在结束状态
both 0%动画会立刻执行, 结束时会停留在结束状态

2. 弹性布局

1)开启弹性布局: 给父盒子 display: flex(使每一个子元素编=变成伸缩项)

设置弹性布局属性: 给父盒子

2) (主轴方向的对齐方式)justify-content: flex-start/flex-end/center(从哪里开始,子元素之间没有距离)

space-around(将多余的宽度平均分配给每一个子盒子)

space-between(间隔在两边)

(侧轴方向的对齐方式)align-items: flex-start/flex-end/center
stretch 拉伸
base 基线对齐
(给单个子元素设置) self-align:

问题:子元素成为伸缩盒子之后,有一个问题是: 当子元素跨度大于父元素时, 子元素会平均缩放,直至能够同行显示,
这种情况下, 子盒子自身设置的宽度都是无效的,所有需要flex-flow属性来让它换行

3) (换行)flex-flow : 实质是flex-wrap 和 flex-direction的属性结合
flex-wrap: 控制是否换行, 默认不换行
wrap === 换行
nowrap === 不换行
wrap-reverse === 默认从上都下, 设置之后, 从下往上

flex-direction: 默认是水平方向row
row 主轴方向为x轴, 副轴为y轴
column 垂直方向(当子元素高度和大于父元素高度时, 换列显示)
column-reverse; 垂直排列方向, 从下往上

4)可以联合写: flex-flow: wrap column; (实际应用分开写)

5)flex 是 flex-gorw flex-shrink 的联合属性

　　flex-grow:1; 默认值是0 设置给子元素每个子元素设置的值不同,根据比例放大

　　flex-shrink: 默认值是1 (所以如果设置为1,那么和其他盒子宽度还是一样) 按比例缩小

　　flex:1; 占父盒子剩余空间;

转载于:https://www.cnblogs.com/noraZhang/p/10050940.html

h5c3 part6 flex相关推荐

2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 [导读]:初学web前端的小伙伴经常会遇到的问题,1.没方法 2.没资源 3.没经验,不知道从何开始 ,代码哥(D ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
常见的H5C3的面试题
一.H5C3 (一)H5C3和Html,css相比有什么变化 1.H5: H5新增元素: header.footer.section.aside.nav.article.button.progress ...
H5C3常见知识点总结
一.H5C3和Html,css相比有什么变化 H5新增特性: (1)语义化标签:如header.nav.footer.aside.article.section等. (2)音频(audio).视频(v ...
H5C3部分面试题汇总
1. HTML和HTML5.CSS和CSS3相比,有什么变化? HTML5中新增的内容有: 自定义属性:data-id 语义化更好的内容标签: header.nav.footer.aside.arti ...
H5C3第一个完整大项目————三国杀登录页跳转游卡官网
本次展示一下游卡官网的代码与成果图成果图如下其中业务板块可以悬停切换图片与下面内容代码如下 html代码 <!DOCTYPE html> <html lang="en ...
CSS flex 用法
flex 用法: flex 可以在浏览器里点击就有~ 设置了 display: flex 的父元素被称之为 flex 容器(flex container),它的子元素都会以 flex 布局. flex ...
flex java socket通信
引用:http://developer.51cto.com/art/201003/189791.htm Java socket通信如何进行相关问题的解答呢?还是需要我们不断的学习,在学习的过程中会遇到 ...
flex和bison实例分析
最近在学习编译原理,利用flex和bison编写一个基于文本识别的简单计算器程序,参考<flex于bison>中内容,对程序进行一些简单的修改,加入Makefile.该计算器程序主要实现识 ...

h5c3 part6 flex

h5c3 part6 flex相关推荐

最新文章

热门文章