When its container has a display for flex, what is the difference between setting an element to be flex: 50% and width: 50%. The outcome appears to be the same: 

ul { display: flex; flex-flow: row wrap; } .table a { flex: 50%; background: grey; } .table2 a { width: 50%; background: grey; } <ul> <a href="#">ad ds fdsaf dsfa dsfj dsf dsfj lkdsjflkdsa jflkdsja lkfjdslkjfldska jlkfdsajlkdjslkajflkd sjalkfjdslkjdsalkjdlakjfldksjflkdsjflkdsjd fdsd</a> <a href="#">b</a> <a href="#">c</a> <a href="#">d</a> </ul> <ul> <a href="#">ad ds fdsaf dsfa dsfj dsf dsfj lkdsjflkdsa jflkdsja lkfjdslkjfldska jlkfdsajlkdjslkajflkd sjalkfjdslkjdsalkjdlakjfldksjflkdsjflkdsjd fdsd</a> <a href="#">b</a> <a href="#">c</a> <a href="#">d</a> </ul>

3

1 Answer

There is no effective difference in this instance.

In fact, it's because flex is shorthand for flex-grow, flex-shrink and flex-basis combined.

flex-basis defines the default size of an element before the remaining space is distributed.

So in this case, you have defined all a children` to 50%.

Reference Article:

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.