All Questions

319
votes
4answers
58914 views

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Consider the main axis and cross axis of a flex container:                        &...
76
votes
1answers
6623 views

Why don't flex items shrink past content size?

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 tri...
712
votes
17answers
291877 views

Maintain the aspect ratio of a div with CSS

I want to create a div that can change its width/height as the window's width changes. Are there any CSS3 rules that would allow the height to change according to the width, while maintaining its asp...
27
votes
2answers
34445 views

Flexbox code working on all browsers except Safari. Why?

Grid columns with list tags, I need to display in correct order per every 3 columns, with auto width enabled for every extra HTML list elements. This is my example: <style> ul { ...
1537
votes
17answers
108073 views

How do CSS triangles work?

There're plenty of different CSS shapes over at CSS Tricks - Shapes of CSS and I'm particularly puzzled with a triangle: #triangle-up { width: 0; height: 0; border-left: 50px solid tra...
1430
votes
44answers
621963 views

How can I transition height: 0; to height: auto; using CSS?

I am trying to make a <ul> slide down using CSS transitions. The <ul> starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, ...
1522
votes
26answers
1385482 views

How to make a div 100% height of the browser window?

I have a layout with two columns - a left div and a right div. The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Rig...
18
votes
5answers
4343 views

Is it possible for flex items to align tightly to the items above them?

This is, in effect, the Pinterest layout. However, the solutions found online are wrapped in columns, which means the container inadvertently grows horizontally. That is not the Pinterest layout, and ...
198
votes
12answers
195851 views

How to center an element horizontally and vertically?

I am trying to center my tabs content vertically but when I add the css style display:inline-flex, horizontal text-align disappears. How can I make both text alignments x and y for each of my tabs? ...
259
votes
7answers
384676 views

Flexbox: center horizontally and vertically

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-containe...

Previous Next