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. C++构造函数中不能调用虚函数

    在构造函数中调用虚函数,并不会产生多态的效果,就跟普通函数一样. c++ primer 第四版中497页15.4.5构造函数和析构中的虚函数讲到,如果在构造函数或析构函数中调用虚函数,则运行的是为构造 ...

  2. java反编译获取源码

    最近在研究反射,想做一个东西,把运行的java程序饭编译(Decompile)成.java文件.现思路如下: 1.写出程序反编译一个类 2.将所有类反编译 3.java代码注入一个正在运行的java程 ...

  3. apache反向代理

    正向代理是客户端发送请求给代理服务器,代理服务器将请求发给实际处理的服务器 反向代理是客户端发送请求给服务器(实际上是个代理服务器),服务器将请求发给实际处理的服务器 情景 在一台服务器上开了apac ...

  4. H5中的touch事件

    touch中共有touchstart.touchmove和touchend三个事件: touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结 ...

  5. Android开发5：应用程序窗口小部件App Widgets的实现

    前言 本次主要是实现一个Android应用,实现静态广播.动态广播两种改变 widget内容的方法,即在上篇博文中实验的基础上进行修改,所以此次实验的重点是AppWidget小部件的实现啦~ 首先,我 ...

  6. [SharePoint]javascript client object model 获取lookup 类型的field的值，包括user类型（单人或者多人）的值。how to get the multiple user type/lookup type field value by Javascript client object model

    1. how to get value var context = new SP.ClientContext.get_current(); var web = context.get_web(); v ...

  7. MyEclipse 2016 CI 4新增BootStrap模板

    Live Preview with CodeLive 目前CodeLive还只有Live Preview这一个功能,在后续的版本中会陆续添加新功能. 新增Bootstrap模板 在模板面板中选择相应的 ...

  8. IOS开发基础知识--碎片13

    1:运行程序报the file couldn't be opened because you don't have permission to view it 解决办法:项目—>targets- ...

  9. sourceTree忽略文件

    *~.DS_Store*.xcworkspacexcuserdata Podfile.lockPods

  10. Eclipse 常用快捷键 For MAC

    Eclipse 常用快捷键 For MAC Option + Command + X: 运行Command + O:显示大纲Command + 1:快速修复Command + D:删除当前行Comma ...