{"id":54322,"date":"2021-12-18T03:01:53","date_gmt":"2021-12-17T17:01:53","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=54322"},"modified":"2021-12-21T11:18:32","modified_gmt":"2021-12-21T01:18:32","slug":"flex-box-css-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/flex-box-css-primer-tutorial\/","title":{"rendered":"Flex Box CSS Primer Tutorial"},"content":{"rendered":"
\"Flex<\/a>

Flex Box CSS Primer Tutorial<\/p><\/div>\n

To use percentage (%) units in CSS in a web application can be a conduit towards Responsive Web Design<\/a> goals you have. But have you considered the “Flex Box”<\/a> as another approach?<\/p>\n

\nCSS3 flexible Box, or flexbox is a new layout model for creating the more flexible user interface design.\n<\/p><\/blockquote>\n

\nFlexible box, commonly referred to as flexbox, is a new layout model introduced in CSS3 for creating the flexible user interface design with multiple rows and columns without using the percentage or fixed length values. The CSS3 flex layout model provides a simple and powerful mechanism for handling the distributing of space and alignment of content automatically through stylesheet without interfering the actual markup.\n<\/p><\/blockquote>\n

And so we thank CSS3 Flexible Box Layouts – Tutorial Republic<\/a> sincerely for the great basis for a proof of concept flex_box.html<\/a>‘s live run<\/a> link for you to try. You’ll see there, that just about the first thing we are interested in here, is to combine “Flex Box” ideas with HTML table element content, to experiment with the “cheese and the chalk” of Responsive Web Design.<\/p>\n

You’ll also see that this topic got us trying what we were not surprised was not supported, but somehow felt allowable to us for a ten minute period trying (the non-<\/b>working)<\/font> contenteditable: true;<\/i> idea. But then the excellent helping link “Why is contenteditable not a style?”<\/a> (via Google search<\/a>) taught us that the CSS<\/font> …<\/p>\n

<style>
\n
\n .flex-container div table tr th {<\/font>
\n \/* contenteditable: true; *\/
\n -webkit-user-modify: read-write;
\n -moz-user-modify: read-write;
\n user-modify: read-write;
\n }<\/font>
\n<\/code>
\n<\/style><\/p>\n

… could be a substitute for the HTML attribute contenteditable=true<\/i> we were after, but do not want to use at this “proof of concept” “no Javascript”<\/a> start to our “Flex Box” (via CSS) project. Feel free to try out a “Flex Box” below …<\/p>\n