Iwen's blog Iwen's blog
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 小程序笔记
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • Linux
  • 学习
  • 面试
  • 心情杂货
  • 友情链接
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
复盘
关于

Iwen

不摸鱼的哥哥
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 小程序笔记
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • Linux
  • 学习
  • 面试
  • 心情杂货
  • 友情链接
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
复盘
关于
  • Vue

  • Vue进阶

  • CSS

    • CSS 世界
    • BFC 浮动
    • 盒子模型
    • 页面布局
    • 选择器
    • Flex布局
      • flex-direction
      • flex-wrap
      • flex-flow
      • justify-content
      • align-items
      • align-content
      • flex: 0 1 auto
    • CSS 揭秘
  • ES6

  • Base

  • Core

  • Array

  • Object

  • String

  • Async

  • Browser

  • Http

  • 性能优化

  • 正则

  • 经典总结

  • 设计模式

  • 数据结构

  • 算法

  • 手写

  • TypeScript

  • 复盘
  • CSS
Mr.w
2020-11-29

Flex布局

# 无敌的Flex布局,大小厂面试管也要给三分面子

作为一个两年的切图仔,flex当真是无敌的存在

兼容性:什么,要兼容IE??? 我辞职,你请马云来给你写代码吧。

老规矩,基础的扎实决定了你装逼的方式

下面,先了解语法和布局的实现

拥有了以下众多的属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

# flex-direction

# flex-wrap

# flex-flow

# justify-content

# align-items

# align-content



1
2

# flex: 0 1 auto

缩写形式,一个值代表一个属性:

  • 第一个 number 表示 flex-grow
  • 第二个 number 表示 flex-shrink
  • 第三个描述宽度的值表示 flex-basis
选择器
CSS 揭秘

← 选择器 CSS 揭秘→

最近更新
01
flex布局页面自适应滚动条问题
12-28
02
前后端分离开发请求接口跨域如何携带cookie的问题
12-28
03
怎么实现div长宽比固定width-height4比3
12-28
更多文章>
Theme by Vdoing | Copyright © 2017-2022 Iwen | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式