flexbox

When flexbox items wrap in column mode, container does not grow its width

由 走远了吗. 提交于 2020-01-05 05:29:07
问题 I am working on a nested flexbox layout which should work as follows: The outermost level ( ul#main ) is a horizontal list that must expand to the right when more items are added to it. If it grows too big, there should be a horizontal scroll bar. #main { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; /* ...and more... */ } Each item of this list ( ul#main > li ) has a header ( ul#main > li > h2 ) and an inner list ( ul#main > li > ul.tasks ). This inner list is

移动Web初级入门

由 你离开我真会死。 提交于 2020-01-05 05:09:13
最好的阅读是输出。 –玉伯 即将开始涉入移动Web了，有点小兴奋也有点小紧张，希望能在未来的团队里带来一些价值。记录一下我现在所认识的移动Web。 原文摘自我的前端博客，欢迎大家来访问 原文地址： http://www.hacke2.cn/hello-mobile-aop/ 一些基本名词 初涉移动Web，会有一些基本的名称需要掌握，什么设备像素比呀，移动端Web的内核呀，viewport呀，屏幕的的最小物理单位呀。我已经记录了一些，以后还得继续补充。 - 常见移动Web名词 关于布局 我们来看看移动端最常见的布局： 上中下三部分布局 下面实现上述页面常见移动Web布局三种方法： fixed absolute flexbox fixed 对于第一种布局，其实现原理就是header和footer部分都为fixed定位。内容页面可以使用 -webkit-overflow-scrolling:touch 来进行滚动，当然，对于不支持的，也可以使用 iscroll 来兼容。 fixed布局网上人说坑太多，滚动的时候bug太多，特别是表单元素时弹出输入法会有很多问题，所以不建议使用，以下是一些网上参考的资料： - 移动Web开发实践——解决position:fixed自适应BUG - 移动端web页面使用position:fixed问题总结 - 移动Web开发

How to break out of 12 col grid with bootstrap 4 flexbox grid?

由 孤街醉人 提交于 2020-01-05 04:59:29
问题 When I heard bootstrap 4 was going to employ flexbox for a grid system I was really excited. I thought that this would deploy the fast and useful element sizing that flexbox is known for. However it seems that it just adds some (major) functionality to the current 12 col grid system. Does Bootstrap 4 make it any easier to relate column widths in a non 12 col layout? Like how flex boxes can be related to each other simply by specifying the horizontal space to divide using flex-item properties

Have image within flexbox fill all vertical space and remain fully visible

由 ﹥＞﹥吖頭↗ 提交于 2020-01-05 04:29:09
问题 I need to have an image to the left of a div, and have the image: Be the same height as the div (which itself has non-fixed, content-dependent height); Be fully visible; Maintain its aspect ratio. Flexbox seems perfect for the job, but when setting the image to 100% height, its dimensions retain the natural width and the content overflows under the div. See snippet below: .container { display: inline-flex; background-color: green; } .image { flex: 0 0 auto; background-color: purple; } .image

Flex to ignore side margin when centering elements

由 …衆ロ難τιáo~ 提交于 2020-01-05 04:09:06
问题 I am having trouble getting flex to center elements (with margin) when it wraps. It looks perfect when the screen is wide But it is not centering it when it wraps (because of the right-margin of the first button) Here is my code: https://jsfiddle.net/dLz7120k/2/ footer { display: flex; flex-flow: row wrap; justify-content: center; } button { margin: 0 20px 10px 0; } button:last-child { margin-right: 0; } Is there any way to make it ignore the right-margin of the first button when it wraps? (I

Flexbox: how to add margin / vertical spacing for the case there is more than one row?

由 喜欢而已 提交于 2020-01-05 01:08:40
问题 here is the codepen I want to add vertical spacing ONLY to elements between line 1 and line 2. Alternatively, only to between line 1 and line 2, and line 2 and line 3. The flex items are random, so the amount, size of each, is dynamic. I cannot add margins to all, because that would ruin the layout in case there is no second row at all. HTML <div class="flexContainer"> <div class="flexItem">a a a aaaaaaa a ax</div> <div class="flexItem">bbbx</div> <div class="flexItem">c c c c c cx</div> <div

Flexbox: how to add margin / vertical spacing for the case there is more than one row?

由 五迷三道 提交于 2020-01-05 01:07:10
问题 here is the codepen I want to add vertical spacing ONLY to elements between line 1 and line 2. Alternatively, only to between line 1 and line 2, and line 2 and line 3. The flex items are random, so the amount, size of each, is dynamic. I cannot add margins to all, because that would ruin the layout in case there is no second row at all. HTML <div class="flexContainer"> <div class="flexItem">a a a aaaaaaa a ax</div> <div class="flexItem">bbbx</div> <div class="flexItem">c c c c c cx</div> <div

How to remove gaps in flexbox?

由 本小妞迷上赌 提交于 2020-01-04 18:32:27
问题 I have built a tab in flexbox with :target which shows .details div when it is clicked. Unfortunately the .details div is very high and has a huge gap at the bottom of the paragraph. Is there a solution in CSS to remove this gap? Demo: https://jsfiddle.net/ocgjrzre/ p { margin: 10px; } body { display: flex; flex-wrap: wrap; } .my-wrap { // height: 200px; width: 90%; margin: 50px auto; display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; border: 1px solid #eee;

Chrome align-items: baseline for select and input elements

由 99封情书 提交于 2020-01-04 14:16:05
问题 I have built a form using flex box and it works beautifully in Firefox, Edge and IE11. Unfortunately in Chrome the text in the spans isn't aligning consistently. It is fine if followed by a select but when followed by an input the text appears to align to the bottom rather than the baeline. I am using baseline instead of center to account for potentially different font sizes. Incorrect layout in Chrome Correct layout in FF I have simplified my code and posted to http://codepen.io

Break long words inside flex item

由 笑着哭i 提交于 2020-01-04 13:44:15
问题 I would like to break long words inside "div2", both div2 and div3 width cannot be greater than parent width (i.e 150px). The only thing that works is word-break: break-all but this will break short words as well. #div1{ display: flex; max-width: 150px; height: 100px;; } #div2{ background-color: gray; } #div3{ background-color: rgb(197, 181, 181); } #div4{ width: 150px; background-color: rgb(144, 199, 172); } <div id="div1"> <div id="div2">aaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb</div> <div id=
订阅 flexbox