面试题 flex（二）

3.flex布局

　　(1)左中右三等分：

　　　给父元素添加display:flex

　　(2)左右布局，一侧定宽，一侧自适应撑满

<div style="display:flex; height:100%; width:100%;"> <div style="width:300px; background:red;"> sss</div> <div style="width:100%; background:green;"> ssssss</div></div>

flex知识点：

1 flex-direction:属性决定主轴的方向；　　　　　　　　　　 row 水平方向，起点在左端　　　　　　　　　　 row-reverse 水平方向，起点右端　　　　　　　　　　 column 纵向方向，起点在上　　　　　　　　　　 column 纵向方向，起点在下

2 flex-wrap:决定是否换行，默认都是排在一行　　　　　　　no-wrap;(默认)不换行　　　　　　　wrap; //换行，第一行在上方　　　　　　　wrap-reverse;//换行；第二行在上方

3 flex-flow:flex-direction和flex-wrap的缩写，默认为row nowrap　flex-flow:<flex-direction> ||<flex-wrap>

4 justify-content:定义在item在主轴上的对齐方式　　　　　　　　　　　flex-start 从左到右　　　　　　　　　　　flex-end 从右到左　　　　　　　　　　　center 居中　　　　　　　　　　 space-between 两端对齐　　　　　　　　　　　space-around 每个item两侧中间相等

5 justify-content:定义在item在主轴上的对齐方式

　　align-items:item在纵轴上的对齐方式：属性如下图：

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 6 align-content 定义了多跟轴线的对齐方式；如果该项目只有一根轴线，该属性不起作用；

.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

https://www.cnblogs.com/yangguoe/p/9969140.html
　

转载于:https://www.cnblogs.com/menghan94/p/11186000.html

面试题 flex（二）相关推荐

【专升本计算机】2021年甘肃省专升本计算机全真模拟试题（二）
[专升本计算机]2021年甘肃省专升本计算机全真模拟试题(一) [专升本计算机]2021年甘肃省专升本计算机全真模拟试题(二) [专升本计算机]2021年甘肃省专升本计算机全真模拟试题(三) [专升本 ...
JS 基础知识点及常考面试题（二）
JS 基础知识点及常考面试题(二) 涉及面试题:== 和 === 有什么区别? 对于 == 来说,如果对比双方的类型不一样的话,就会进行类型转换,这也就用到了我们上一章节讲的内容. 假如我们需要对比 ...
数据、运营相关试题（二）【牛客网：京东2019春招产品运营类试卷】
试题来源:牛客网试题答案仅供参考.其中前半部分偏向产品运营类试题,后半部分偏向综合测试类试题. 数据.运营相关内容,一起好好学习,天天向上吧! 数据.运营相关案例问答题(一)[牛客网:数据分析试题广 ...
面试题汇总二 Java 多线程篇
前言题目汇总来源史上最全各类面试题汇总,没有之一,不接受反驳面试题汇总一 Java 语言基础篇面试题汇总二 Java 多线程篇面试题汇总三 Java 集合篇面试题汇总四 JVM 篇面试题 ...
oracle中部门工资降序排列,oracle面试题整理二（10级学员乔宇整理）
Oracle面试题整理二(10级学员乔宇整理) 1.查询工资最高的3 名员工信息 select * from (select * from emp order by sal desc) where ...
公务员考试计算机最后程序题,公务员考试计算机试题十二
计算机专业公务员考试各地真题-- 公务员考试计算机试题十二一.选择题((1)-(30)每个选项1分,(31)-(55)每个选项2分,共80分) (1) 微机计算机中,控制器的基本功能是 A) 实现算 ...
前端常见面试题---flex:1 是什么？
前端常见面试题-flex:1 是什么文章目录前端常见面试题---flex:1 是什么 Flex-grow Flex-shrink Flex-basis flex=1得应用一个高度自适应的div, ...
软件测试常问面试题【二】
软件测试常问面试题[二] 1.APP性能测试遇到什么bug没有? 性能bug:卡顿.ANR.内存泄漏 2.什么是兼容性测试?兼容性测试要测试哪些方面? 主要包括: 不同操作系统版本的兼容(Androi ...
前端经典面试题（二）-李游Leo-专题视频课程
前端经典面试题(二)-80人已学习课程介绍在鱼龙混杂的前端行业中,面试一直是一门非常重要的课程,尤其是笔试题. 本课程精选了14道出现率颇高的经典的前端面试题,从浅入深的了解认知这 ...
计算机组成原理试题（二）（附参考答案）
一.选择题 (共 20题,每题1分, 共 20 分) 1. 在下列机器数______中,零的表示形式是唯一的. A．原码 B．补码 C．反码 D．原码和 ...

面试题 flex（二）

面试题 flex（二）相关推荐

最新文章

热门文章