flex弹性布局

最新推荐文章于 2024-04-27 10:05:36 发布

毕竟是杨哥

最新推荐文章于 2024-04-27 10:05:36 发布

阅读量627

点赞数

文章标签： css3 css 前端 web app

本文链接：https://blog.csdn.net/y1815151/article/details/120956941

版权

为什么出现Flex弹性盒布局？

布局的传统解决方案，基于盒子模型，依赖 display 属性 + position属性 + float属性。它对于有些特殊布局非常不方便，比如，垂直居中就不容易实现（现有技术满足不了开发需求）

3、flex发展历史

2009年W3C 提出概念，但是官方没有flex这个词。当时使用display:box;表示弹性布局

2011年浏览器厂商决定使用flexbox，来形容它的布局特点

2015年W3C正式将其修改为flexbox布局

2016年5月官方正式公布最新的稳定的flex布局规范标准，各大浏览器的支持越来越稳定

4、flex定义

Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
作用
- 它能够更加高效方便的控制元素的对齐、排列
- 可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的
- 控制元素在页面的布局方向
- 按照不同于DOM所指定排序方式对屏幕上的元素重新排序

5、应用场景

使用在现代浏览器中，史前浏览器不支持如 chorme4.0 有一定宽容度要求的设计中,因为弹性布局灵活性太高，很难100%还原设计稿，需要有一定的宽容度的设计稿

6、Flex基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”
默认水平方向为主轴（main axis）
默认垂直方向为交叉轴、侧轴（cross axis）
项目默认沿主轴排列

7、Flex布局语法

语法

想让谁成为flex布局的容器，就在该元素上设置flex属性
- 块级元素 display : flex; / display:-webkit-flex
- 行内元素 display : inline-flex;
添加前缀，即浏览器前缀
设为 Flex 布局以后，flex item(项目)的float、clear和vertical-align属性将失效,定位不失效>

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{

最低0.47元/天解锁文章

毕竟是杨哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex弹性布局

1.为什么出现Flex弹性盒布局？布局的传统解决方案，基于盒子模型，依赖 display 属性 + position属性 + float属性。它对于有些特殊布局非常不方便，比如，垂直居中就不容易实现（现有技术满足不了开发需求） 3、flex发展历史2009年W3C 提出概念，但是官方没有flex这个词。当时使用display:box;表示弹性布局2011年浏览器厂商决定使用flexbox，来形容它的布局特点2015年W3C正式将其修改为flexbox布局2016年5月官方正式
复制链接

扫一扫