1，今天遇到一个问题，就是当元素布局设置为了flex后，里面的内容只有文字，但是对text-align 属性设置无效，仔细想了下，是因为把display 设置为了flex后，flex将里面的文字也认为是一个子元素（其实就是子元素。。只不过是文字节点而已），子元素布局可以通过align-items 设置Y轴，justify-content 设置X轴的对齐方式（假如flex-flow 设置为了row wrap后）。

那么在这种情况下，元素设置为flex后，文字节点是不能通过设置text-align居中的。

如果要设置居中的话，可以通过justify-content:center 来设置，如果硬要通过text-align设置，那么要将flex去掉才行。

flex 布局笔记的更多相关文章

  1. flex布局笔记整理

    flex布局笔记整理 了解-webkit-box 利用postcss进行css代码的向后兼容时,display:flex兼容后的代码常会带有display:-webkit-box. 部分移动端内核较低 ...

  2. 1.display:flex布局笔记

    /*display:flex布局方式主要运用于垂直居中的效果*/ 一.Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局 注:设置为Flex布局之后,子元素的flo ...

  3. flex布局笔记

    flex布局: 容器: 容器主轴方向: 项目的主轴对齐方式: space-between:两端对齐,项目之间的间隔都相等. space-around:每个项目两侧的间隔相等.所以,项目之间的间隔比项目 ...

  4. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  5. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  6. CSS 学习笔记 - Flex 布局

    传统布局方式的局限性 传统的网页布局方式,采用 display + position + float 的方式来实现.这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性. 比如,最常 ...

  7. Flex布局学习笔记

    任何元素都可以使用Flex布局,包括行内元素 display: flex; display: inline-flex使用Flex布局之后,子元素的float, clear, vertical-alig ...

  8. Flex 弹性布局——笔记

    将容器指定为Flex布局 display:flex -->d-flex display:-webkit-flex /*Safari*/ *float clear vertical-align失效 ...

  9. css布局笔记（二）Flex

    flex Flex是"Flexible Box"的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可指定为Flex布局. .box{di ...

随机推荐

  1. [转载] php用csv文件导出大量数据

    header ( "Content-type:application/vnd.ms-excel" ); header ( "Content-Disposition:fil ...

  2. 关于Java数组

    今天,我们将要谈到的是Java里的数组 数组是一种容器,它是一些相同类型元素的集合.我们可以用数组,去存储一些相同类型的数据,比如,整数,浮点数,字符,...事实上,数组甚至可以用来存储同一个类的多个 ...

  3. Linux下三个密码生成工具

    http://code.csdn.net/news/2820879 想出一个难破解且容易记的密码对不是一件简单的事情.在我为电脑设定一个新密码,或者在线注册了一个新的账号,需要输入密码的时候,脑袋就一 ...

  4. 哈哈：sqlserver2008附加数据库时操作系统错误5(拒绝访问)错误5012的解决办法

    老师说:无论干什么,出错了,先大笑三声.如果人多了,在心里也要大笑三声.哈哈哈!!! 刚刚重装系统完后,然后想学习.自己去安装sqlserver2008数据库,完之后想附加之前的数据库.可是当我一点确 ...

  5. （原）3.4 Zookeeper应用 - 分布式锁

    本文为原创文章,转载请注明出处,谢谢 分布式锁 1.原理 建立表示锁的父节点(图中locker节点) 每个争抢锁的服务器在locker节点下创建有序的临时节点 判断自己是否抢到锁:获取locker下所 ...

  6. 《C#微信开发系列（4）-接收 / 返回文本消息》

    4.0接收 / 返回文本消息 ①接收/返回文本消息原理说明 当普通微信用户向公众账号发消息时,微信服务器将POST消息的XML数据包到开发者填写的URL上,着手开发之前先行阅读微信公众平台接收普通消息 ...

  7. webpack CommonsChunkPlugin详细教程

    1.demo结构: 2.package.json配置: { "name": "webpack-simple-demo", "version" ...

  8. View and Data API tips: 缓存Access Token

    对于云API服务,常见的方式就是按照API调用次数收费,某些API调用也就有某些限制,比如在特定时间内只允许调用指定的次数以免造成滥用.虽然Autodesk的view and Data API目前还没 ...

  9. 谷歌电子市场1--BaseFragment

    1.BaseFragment 共性 加载中加载失败数据为空加载成功 2.loadData调用 3.网络封装 请求网络获取数据缓存机制(写缓存和读缓存)解析数据请求网络前,先判断是否有缓存, 有的话就加 ...

  10. Android自定义ViewGroup,实现自动换行

    学习<Android开发艺术探索>中自定义ViewGroup章节 自定义ViewGroup总结的知识点 一.自定义ViewGroup中,onMeasure理解 onMeasure(int ...