前言

　　 在flex布局出现以前，我一般习惯使用浮动布局（float）来实现下列布局

　　 

　　现在尽量少用浮动布局，虽然好用，但有时会带来一些意想不到的问题，甚至导致布局错位，

　  一开始浮动布局只是为了实现文字环绕而出现的，而后来却被广泛运用到布局当中。现在有了更好的解决方案flex布局

　　

　　 问题

　  最近使用flex实现上面布局时出现了一个奇怪的问题，如下图

　　

　　正常情况是超出后换行并依次从左往右排列，而上图是先左后右在中间，我使用了flex-wrap: wrap换行属性，确认属性无误并且代码没有写错

　　后来几经调试发现是justify-content属性影响了

　　若给Tab标签的父元素设置两端对齐（justify-content:space-between），则会出现上述情况

　　若给Tab标签的父元素设置水平居中（justify-content:center），则会出现下图情况

　　

　　解决

　   ①：设置 justify-content:flex-start 然后调整tab标签元素之间的间距即可

　　②：不给Tab标签的父元素设置 justify-content属性，给子元素tab设置 justify-content属性

　　

flex——justify-content属性引起的一个样式问题的更多相关文章

  1. （九）pdf的构成之文件体（content属性）

    content属性简单当成一个流来处理 流内部属一个画笔,下面介绍画笔属性 文本对象: BT    文本开始 ET    文本结束   文本状态:       Tc    字符之间的距离       ...

  2. Flex利用titleIcon属性给Panel容器标题部添加一个ICON图标

    Flex利用titleIcon属性,给Panel容器标题部添加一个ICON图标. 让我们先来看一下Demo(可以右键View Source或点击这里察看源代码): 下面是完整代码(或点击这里察看): ...

  3. js 获取任意一个元素的任意一个样式属性的值

    //谷歌,火狐支持console.log(window.getComputedStyle(my$("dv"),null).left);//IE8支持console.log(my$( ...

  4. 脚本工具（获取某个文件夹下的所有图片属性批量生成css样式）

    问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...

  5. 【转】如何建立一个样式新颖的CSS3搜索框

    在线演示 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它.无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框? 在今天的文章 ...

  6. CSS3使用content属性来插入项目编号

    首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在 ...

  7. flex布局justify-content属性和align-items属性设置

    前言: flex最常用的就是justify-content和align-items了,这里把这两个属性介绍下,大家更多关于flex布局可以查看阮一峰的日志,写的非常清楚! 阮一峰flex布局的日志:h ...

  8. CSS魔法堂：一起玩透伪元素和Content属性

    前言  继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...

  9. 浅谈 easyui tabs 的href和content属性

    众所周知,jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考. 两者特点: ...

随机推荐

  1. Cocos2d-x开发教程——《萝莉快跑》

    更好的阅读体验请前往<萝莉快跑>开发教程. 配置:win7+Cocos2d-x.2.0.3+VS2012 目标读者:已经了解图形显示.动作.回调函数.定时器的用法. 一.基本知识点 1.动 ...

  2. leetcode题解：两数之和

    给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元 ...

  3. java之Set接口（单列集合）

    Set接口概述 java.util.Set 接口和 java.util.List 接口一样,同样继承自 Collection 接口,它与 Collection 接口中的方法基本一致,并没有对 Coll ...

  4. angularjs中directive指令与component组件有什么区别？

     壹 ❀ 引 我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...

  5. JavaScript 字符串是否包含某个字符串

    字符串方式 indexOf()   (推荐) var str = "123"; console.log(str.indexOf("3") != -1 ); // ...

  6. vue-svgicon基本使用

    在项目开发中,经常会用到svg图标,之前用的都是vue-svg-icon,最近在npm中搜索svg图标解析插件,发现vue-svgicon用的相对较多,对比以下,vue-svgicon用法较为灵活,方 ...

  7. Servlet 使用介绍(1)

    说明 本篇介绍java web中比较重要的一个技术:servlet.servlet是一种对用户请求动态响应的一个技术,是java web的核心一环.对于一般服务性质的纯后台服务应用而言,或许整个应用是 ...

  8. IDEA 运行后乱码问题解决

    页面乱码: 在edit configurations->vm options 添加 -Dfile.encoding=UTF-8 调整idea文件编码格式,全部为 UTF-8 (file -> ...

  9. 6个最优秀的微信小程序UI组件库

    开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面6款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...

  10. 对java的几点个人浅浅的认知

    特点   简单地说,Java 具有如下特点:简单的.面向对象.平台无关.多线程.分布式.安全. 高性能.可靠的.解释型.自动垃圾回收等特点. 主要面向internet的语言 Java比其他任何一门语言 ...