27 Matching Annotations
  1. Oct 2022
    1. Auto Margins With auto margins, flex items can be centered, spaced away or packed into sub-groups. Unlike justify-content, which is applied to the flex container, auto margins go on flex items. They work by consuming all free space in the specified direction. Align group of flex items to the right, but first item to the left Scenario from the question: making a group of flex items align-right (justify-content: flex-end) but have the first item align left (justify-self: flex-start) Consider a header section with a group of nav items and a logo. With justify-self the logo could be aligned left while the nav items stay far right, and the whole thing adjusts smoothly ("flexes") to different screen sizes.
  2. Feb 2022
  3. Jan 2022
  4. Jun 2021
  5. May 2021
    1. Honestly, even without flexbox support, most of the layout problems would be solved with simple-basic CSS3 support that is standard in all clients.

      layout problems don't need ; all we need is simple-basic CSS3 support that is standard in all clients.

  6. Apr 2021
    1. Now that we’ve gotten newer layout features — again, like grid and flexbox — floats, too, have sort of fallen by the wayside, perhaps either because there are better ways to accomplish what they do
  7. Feb 2021
    1. Just like in flexbox, this will move the displayed grid items out of source order, placing them after the grid items that don’t have explicit order values.
    1. This nav bar by Chris Coyier is a great example of something that makes more sense as a flexbox than grid.
    2. Flexbox and grid play well together, and are a huge step forward from the float & table hacks they replace.
    3. Flexbox's strength is in its content-driven model. It doesn't need to know the content up-front. You can distribute items based on their content, allow boxes to wrap which is really handy for responsive design, you can even control the distribution of negative space separately to positive space.
    4. Flexbox: content dictates layout
    5. Grid: container dictates layout
    1. the difference is exactly like block and inline-block ... if you use inline-grid with sibling elements they will be placed in the same line unlike grid ... so here you change to grid also since each element is inside a grid area alone
  8. Jan 2021
    1. Situation: you have a single line of text in a flex child element. You don’t want that text to wrap, you want it truncated with ellipsis (or fall back to just hiding the overflow). But the worst happens. The unthinkable! The layout breaks and forces the entire flex parent element too wide. Flexbox is supposed to be helping make layout easier!
  9. Dec 2020
  10. Nov 2020
    1. iron-list must either be explicitly sized, or delegate scrolling to an explicitly sized parent. By "explicitly sized", we mean it either has an explicit CSS height property set via a class or inline style, or else is sized by other layout means (e.g. the flex or fit classes).
  11. Oct 2019
  12. Sep 2019