0

In the jsfiddle example I have 4 divs side by side, each div having a few elements in column. The first div has a long content, and I need some flexibity when stacking the other columns vertically.

In the CSS, the default is for the column elements to stack at the top, using align-items: 

div.flex {
    ...
    align-items: flex-start;
}

However I need to be able to override it dynamically in inline html style, to be able to stack the other columns either at the top, or stretched or at the bottom:

<style type='text/css'>
        #left { 
            align-items: flex-start;
            flex: 1;  
            background-color: beige;
        } 
        #middle { 
            align-items: stretch;
            flex: 1;  
            background-color: lightblue;
        } 
        #right { 
            align-items: flex-end;
            flex: 1;  
            background-color: salmon;
        } 
</style>

Although I can modify the vertical stacking in the CSS using align-items, it doesn't work in the inline HTML style when I do it at the ID level. Also flex-end aligns horizontally when its inline and vertically when it's in the CSS. So any help is much appreciated.

jsfiddle

Duzmac
  • 421
  • 1
  • 5
  • 14
  • You should use `align-self` when set on the flex item, not `align-items`, which is used on the flex container – Asons Nov 29 '17 at 20:38
  • 1
    Thanks @Michael_B and @LGSon! align-self fixed the issue. What confused me was that my flex items are flex containers as well. – Duzmac Nov 30 '17 at 03:10

0 Answers0