flex布局的justify-content属性写法注意事项

做项目时候写了个表格，发现在谷歌浏览器看着正常，在别的浏览器（比如360浏览器）看着不正常。正常效果应该是第一列挨着那条垂直分界线。

谷歌浏览器的效果：

360浏览器的效果

后来检查了发现我把justify-content:flex-end中的flex-end写成了end，这样写是不规范的，虽然在谷歌浏览器生效了，但是在别的浏览器就不一定了。

当时没注意这个问题，我写完页面后都是用谷歌浏览器看的效果，没试别的浏览器，所以我以为我写的没问题。然后导致开会的时候挨批评了，说我为什么没把这个问题改过来，会后我换了个浏览器试了试才发现确实有问题。

建议大家以后写的时候规范一点，如果发现属性不生效，先检查一下自己写的属性对不对，比如完不完整，拼写对不对。前端页面开发的时候也可以多换几个浏览器看看效果正不正常。

flex布局的justify-content属性写法注意事项相关推荐

flex布局父项常见属性justify-content
1.flex布局父项常见属性 justify-content设置主轴上的子元素排列方式 justify-content 属性定义了项目在主轴上的对齐方式注意:使用这个属性之前一定要确定好主轴是哪个 ...
演示和解析Flex布局中的各种属性
文章目录文章导读一.justify-content center flex-start flex-end space-around space-evenly space-between 二.ali ...
『解疑』flex布局 flex-wrap:wrap 自动换行属性，导致两行div中间有大空行。
问题 flex布局,用了flex-wrap:wrap;自动换行属性后,导致两行div中间有空行.(如下图所示) 解决给外层父元素添加 align-content:flex-start 样式解决后: ...
Flex布局常用的一些属性及解释
记录一下忘记的时候翻一下父项常见属性 flex-direction:设置主轴的方向 justify-content:设置主轴上的子元素排列方式 flex-wrap:设置子元素是否换行 align- ...
Flex布局常见父项属性（一）- flex-direction
一.flex-direction用于设置主轴的方向 1.主轴和侧轴在flex布局中分为主轴和侧轴两个方向,也可称为行和列.x轴和y轴其中默认主轴方向为x轴,水平向右默认侧轴方向为y轴,水平向下 ...
CSS3 Flex布局弹性容器的属性
为了实现对弹性子元素的灵活控制,在弹性容器上定义了相关属性,通过这些属性来控制主轴的方向.子元素溢出后的行为.子元素的对齐方式等.这些属性见表 9‑2: 表 9-2 父元素属性属性说明 flex- ...
Flex布局常用属性简介
flex弹性布局 flex布局与传统布局的区别传统布局: 传统布局,基于盒模型,依赖 display属性 .position属性 .float属性,它对于那些特殊布局非常不方便,比如垂直居中. 兼容 ...
flex布局——flex-direction属性
1.flex布局原理 1)flex是flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局. 当我们为父盒子设为fl ...
flex布局（flex容器，flex属性）
文章目录前言一.flex(Flexible Box)概述二.flex容器,flex属性 1.flexBox弹性模型 2.基本概念详解 3.弹性容器的属性 4.弹性元素的属性 5.圣杯布局 6.垂 ...

flex布局的justify-content属性写法注意事项

flex布局的justify-content属性写法注意事项相关推荐

最新文章

热门文章