Flex布局
文章平均质量分 53
父项 和 子项 的 Flex 布局知识点。
前端杂货铺
软件工程本 for QTU,校级奖学金 & 科技创新奖学金获得者。第十三届蓝桥杯-Web应用开发-山东省二等奖。 CSDN前端领域优质创作者,阿里云社区专家博主。目前效力于中国工业软件事业!
展开
-
Flex 布局 ------ 父项常见属性
一、flex-direction 设置主轴的方向。flex-direction: 设置主轴的方向。默认主轴方向就是 x 轴 ( 默认 flex-direction: row),水平向右。默认侧轴方向就是 y 轴,水平向下。可以设置主轴方向为 y 轴 flex-direction: columnflex-direction 属性决定主轴的方向,元素跟着主轴排列。属性值 和 说明 如下row:默认值从左到右row-reverse: 从右到左column: 从上到下column-reve原创 2022-02-28 19:42:42 · 2299 阅读 · 3 评论 -
Flex 布局------ 子项常见属性
flex 子项 flex 份数flex 属性:定义子项目分配剩余空间,用 flex 来表示占多少份数。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev原创 2022-02-28 20:30:50 · 661 阅读 · 0 评论 -
Flex 布局
flex 布局原理flex 布局是 flexible Box 的缩写,意为“弹性布局”,用来为盒子模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。注意:当我们为父盒子设为flex布局以后,子元素的float、clear 和 vertical-align 属性将失效。伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局= flex布局。采用 Flex 布局的元素,成为 Flex 容器,简称“容器”。它所有子元素自动成为容器成员,成为Flex 项目,简称“项目”。原理总结:通原创 2022-02-27 19:19:31 · 335 阅读 · 0 评论