flexbox

分享一下CSS中一个超实用又方便的属性——flex-shrink！这个属性是Flexbox布局系统中一个很重要的特性，通过调整这个值你能轻松实现元素缩放，打造完美的自适应布局网站。在这篇文章中，我将从

一、概念 弹性盒模型是css3的一种新的布局方式，是一种当前页面需要适应不同的屏幕大小及设备类型时确保拥有恰当的行为的布局方式。 二、目的 引入盒模型的目的是提供一种更加有效的方式来对一个容器中的子元

本篇文章讨论的是一个较为深入的知识，可能更多的是偏向于理论知识上，对此不了解可能也不会影响到大家的实际使用。但是了解过后，可能对日后遇到的一些问题避免陷入钻牛角尖的地步。

当我们需要在 Flexbox 中左对齐或右对齐 flex 项目时，有好些个属性值可供我们选择。在这篇文章中，我将解释以下几个似乎含义非常相似的属性值之间的区别。

使用 transform: translate(-50%, -50%) 元素居中的时候，你是否遇到过文字模糊的情况？别担心，本文将为你详细讲解这个问题，并提供两种可行的解决方案。让你的页面不仅水平垂直

初识 弹性盒子是一种用于按行或按列布局容器的一维布局方法。容器可以膨胀以填充额外空间，收缩以适应更小的空间 一行在不同分辨率下可能表现不同 一列中可能让某一个更长一些 主轴与交叉轴 注意点： 主轴与交

Flexbox 弹性盒子布局和其它 CSS 部分不同，很难仅通过使用来理解。直到最近修订《CSS Master》这本书，我才算是有点搞懂了。本文旨在为大家揭开它的神秘面纱。

默认值 一些细节： （1）align-items: stretch; 当 flex-direction: row; 水平按行排列时，项目没有设置高度，或者高度为 auto 时，align-items:

在我们日常开发中，经常会遇到各种各样的页面布局，本文提取出7种常见的页面布局方式，带你使用flex布局轻松完成它。

在学习如何构建 Figma 插件的过程中，我偶然发现了一些 Figma 中 Flexbox 和 Grid 布局好玩的用法。这个发现使我情不自禁地继续深挖下去。

我先问 2 个问题： 1. 你是不是用主轴-交叉轴/辅轴/副轴的概念理解 flex 2. 你是不是也用这个概念去理解 grid

防御式左右等高布局，右侧文本框的高度根据文本字数的多与少进行自适应，左侧文本框的高度要跟右侧的高度保持一致

在开发的时候常用 flex 这个属性作用于弹性盒子的子元素，那么这个属性到底控制了元素怎么的行为呢？`flex:1`又究竟是什么含义呢？让这篇文章带你彻底了解 flex 属性吧！

这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情 父项中的最后一个属性 flex-flow 这个属性其实 flex-durection和 flex-wrap属性的复合属性（也就

Flex:‘弹性布局’ 一、指定为Flex布局 任何一个容器都可以指定为Flex布局，如果值为flex则容器为块标签 容器默认存在两根轴， 水平主轴是main axis,结束位置叫做main end;

传统布局 基于盒状模型，依赖 display属性 + position属性 + float属性 对于那些特殊布局非常不方便，例如：垂直居中就不容易实现。 Flex布局 Flex是Flexible Bo

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情 一.Flex布局是什么 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的

flex布局/弹性布局 对flex布局兼容问题 ​ 登录https://caniuse.com/，可以查到任何技术 less语法讲解 **Bootstrap 是最受欢迎的 HTML、CSS 和

1. 概念 Flex 是 Flexible Box 的缩写，即"弹性布局"；任何一个容器都可以指定为 Flex 布局；设为 Flex 布局以后，子元素的float、clear和vertical-ali