flexbox

Why is an element with width:100% not taking the parent's width?

由 笑着哭i 提交于 2019-12-30 10:43:51
问题 I am facing the issue that I cannot set the same width as its parent inside a flexbox item. Here is the code and the span with the class theSpan doesn't have the same width as its parent. .container { display: flex; } .item1 { flex: 1 1 200px; border: 5px solid yellow; } .item2 { flex: 1 1 200px; border: 5px solid blue; } .item3 { flex: 1 1 200px; border: 5px solid red; } .theSpan { width: 100%; border: 2px solid black; } <div class='container'> <div class='item1'> <span class='theSpan'

Why is an element with width:100% not taking the parent's width?

由 核能气质少年 提交于 2019-12-30 10:42:28
问题 I am facing the issue that I cannot set the same width as its parent inside a flexbox item. Here is the code and the span with the class theSpan doesn't have the same width as its parent. .container { display: flex; } .item1 { flex: 1 1 200px; border: 5px solid yellow; } .item2 { flex: 1 1 200px; border: 5px solid blue; } .item3 { flex: 1 1 200px; border: 5px solid red; } .theSpan { width: 100%; border: 2px solid black; } <div class='container'> <div class='item1'> <span class='theSpan'

Pulsating ring animation with CSS

由 ￡可爱￡侵袭症＋ 提交于 2019-12-30 10:34:52
问题 I want to have an expanding radius that starts from the center of the div instead of it starting on the top left of the div . Imagine the button has a pulsing outline that goes outwards. That pulsing outline should start from the middle of the div and go out. See example here: https://jsbin.com/dinehoqaro/edit?html,css,output You can see that the expansion is starting from the top left. .circle { background-color: white; border: 1px solid red; border-radius: 50%; width: 50px; height: 50px;

How to change order of divs on smaller screens?

由 你说的曾经没有我的故事 提交于 2019-12-30 09:42:24
问题 I need to reorder the divs when screen size is less than 480px. I don't want to use position: absolute because the height of the green area may vary due to amount of text. I need the small screen order to be red, green, red, green, red, green (each red being on top of the immediate green and width being 100%). Any idea? Many thanks *, html, body { margin: 0; padding: 0; } .container { width: 100%; display: inline-block; box-sizing: border-box; } .full_half { display: inline-block; width: 50%;

Nested flexbox with scrolling area

由 跟風遠走 提交于 2019-12-30 06:43:42
问题 I'm trying to achieve this layout in the latest Chrome, Firefox and IE11: I can get this working with the following: html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html, body { height: 100%; padding: 0; margin: 0; } p { line-height: 2em; } header, footer, article { padding: 10px; } #parent { height: 100%; display: flex; flex-flow: column nowrap; background-color: limegreen; } #parent > header { flex: none; background-color: limegreen; } #parent > footer { flex:

Setting overflow: scroll on a table with display: flex

由 感情迁移 提交于 2019-12-30 05:29:15
问题 I have a table with the display: flex property, whose cells will be centered vertically. When there are more cells than the table can show, the overflow: scroll property doesn't take the top ones into account. In the sample code below, the scroll stops at the letter K when it should go all the way up to the letter A. What is causing this? #container { height: 180px; display: flex; flex-flow: row; align-items: stretch; border: 1px dashed gray; } table { display: flex; flex-flow: row; align

Angular Material fixed toolbar AND sticky footer

由 北战南征 提交于 2019-12-30 00:35:11
问题 I have been beating my head against this issue for some time now and sort of came up with a solution. I would like a fixed toolbar (navbar) as well as a sticky (floating) footer. The footer should float at the bottom of the main section but be sticky to the bottom when there is no content. It seems that I can do one or the other but not both. With this method the toolbar is fixed but the footer isn't sticky. It butts up to the toolbar when the main section is empty. <body ng-controller=

How to truncate string inside a direction column flexbox child

由 生来就可爱ヽ(ⅴ＜●) 提交于 2019-12-29 09:37:08
问题 I went over the article from csstricks, https://css-tricks.com/flexbox-truncated-text/ My question how to make it work when the .flex-parent has flex-direction: column; property. Thanks for help! 回答1: This really is just a matter of rearranging some properties, but naturally this answer depends on the projects needs. Takeaways here are, if you want it to be a column, by nature every top-level element you include in the .flex-parent , when it's set to column direction, will display as such.

Understanding the flex property

由 烂漫一生 提交于 2019-12-29 06:29:57
问题 Why, in this example, is the .main element (blue) dividing space only with .aside-1 (yellow) and .aside-2 (pink), and not with all elements? We have a wrapper that is putting all elements occupying one line. In .main we say flex: 3 0px , which I think says, this element will be 3x bigger than the other four elements and will occupy 3/(3+1+1+1+1). However, I've noticed that with a nowrap wrapper the smallest item is .main . And with wrap , it divides with the two closest elements. Can't

Is there really no way to wrap text around an image in flexbox?

由 杀马特。学长 韩版系。学妹 提交于 2019-12-29 06:24:10
问题 Normally when you have a block of text you can just float the image left or right to wrap the text around it, but in flexbox floats do not work and I am struggling to find a solution. Bootstrap 4 is going to use flexbox for their new grid system but this might be a deal breaker if you can't have a block of text in a column and also have text wrap around an image. 回答1: Firstly, flexbox is not a grid system nor is it intended to replace one. Indeed, Bootstrap 4 still has pretty much the same
订阅 flexbox