I have 4 flexbox columns and everything works fine, but when I add some text to a column and set it to a big font size, it is making the column wider than it should be due to the flex property. I tried to use word-break: break-word and it helped, but still when I resize … Read more
Attempting a flexbox nav that has up to 5 items and as little as 3, but it’s not dividing the width equally between all the elements. Fiddle The tutorial I’m modeling this after is http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ SASS * { font-size: 16px; } .tabs { max-width: 1010px; width: 100%; height: 5rem; border-bottom: solid 1px grey; margin: 0 … Read more
I have a simple flex-box layout with a container like: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } Now I want the items in the last row to be aligned with the other. justify-content: space-between; should be used because the width and height of the grid can be adjusted. Currently it looks like … Read more
I have two div elements side by side. I’d like the height of them to be the same, and stay the same if one of them resizes. If one grows because text is placed into it, the other one should grow to match the height. I can’t figure this one out though. Any ideas? <div … Read more
I would like to use flexbox to vertically align some content inside an <li> but not having great success. I’ve checked online and many of the tutorials actually use a wrapper div which gets the align-items:center from the flex settings on the parent, but I’m wondering is it possible to cut out this additional element? … Read more
What is the difference between align-items and align-content? 14 s 14 The align-items property of flex-box aligns the items inside a flex container along the cross axis just like justify-content does along the main axis. (For the default flex-direction: row the cross axis corresponds to vertical and the main axis corresponds to horizontal. With flex-direction: … Read more
I have a div with some children: <div class=”content”> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href=”https://stackoverflow.com/” class=”button”>Click me</a> </div> and I want the following layout: ——————- |heading 1 | |heading 2 | |paragraph text | |can have many | |rows | | | | | | | |link-button | ——————- Regardless … Read more
I’m trying to fill the vertical space of a flex item inside a Flexbox. .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class=”container”> <div class=”flex-1″></div> <div … Read more
How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally. .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: tomato; padding: 5px; width: … Read more
Is there a more flexbox-ish way to right-align “Contact” than to use position: absolute? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class=”main”> <div class=”a”><a href=”#”>Home</a></div> <div class=”b”><a href=”#”>Some title … Read more
