Panoramica di Flex (1.0)

Che cos'è Flex?

Flex è un nuovo modo di progettare sezioni e pagine che si basa su una nuova tecnologia di editing in linea e su layout flessibili come: griglia CSS, flex, allineamento migliorato e così via. Flex permette di ottenere una responsività completa e una precisione a livello di singolo pixel per ciascun elemento, in base ai breakpoint.

Flex è perfettamente integrato nell'editor esistente, in modo che gli utenti possano scegliere quando e dove utilizzarlo. Ciò significa che Flex offre tutti gli stessi vantaggi del nostro editor, ma con un numero notevolmente superiore di funzionalità di progettazione.

Aggiungi sezione Flex

Per aggiungere una sezione Flex:

1. Passa con il mouse tra le righe e verrà visualizzato il tasto Aggiungi sezione. Le sezioni vengono visualizzate nel pannello laterale. In alternativa, fai clic sul tasto destro per aprire il menu contestuale, e poi clicca su Aggiungi sezione.
2. Fai clic su Sezioni Flex nel pannello laterale.
3. Fai clic sulle sezioni Flex che desideri aggiungere, quindi clicca su Salva nella parte superiore della pagina.
4. La modalità Flex si aprirà con la sezione da modificare.

Per ulteriori informazioni, vedi Aggiungere e modificare le sezioni di Flex (1.0).

Panoramica della modalità Flex

Pannello Livelli

Il pannello dei livelli viene visualizzato sul lato sinistro dell'editor e mostra gli elementi presenti sulla pagina (griglie, widget, flexbox, caselle di testo e così via. Da qui è possibile selezionare gli elementi, riordinarli e rinominarli. Il pannello dei livello inizia sempre con la sezione; sotto di essa ci sono le griglie, seguite dai widget o dai contenitori.

Inoltre, è possibile navigare tra gli elementi nei seguenti modi:

• Seleziona un elemento nella griglia che punti verso l'elemento nel menu che compare sopra.
  
• Fai clic sui breadcrumb sopra il pannello di progettazione.

Pannello di progettazione

Il pannello di progettazione viene visualizzato sul pannello di destra dell'editor, e contiene i controlli di progettazione per l'elemento selezionato (contenitore, flexbox, widget). Le opzioni fornite comprendono layout, dimensioni, allineamento e altro ancora.

Misure di dimensionamento nel pannello di progettazione

Su Flex sono presenti una serie di misure per il dimensionamento.

• Pixel (px). Le dimensioni rimangono invariate per ciascun breakpoint.
• Larghezza riquadro visualizzazione (vw). La percentuale della larghezza dell'elemento quando viene visualizzato su un determinato schermo. 10 vw equivale al 10% della larghezza del riquadro di visualizzazione. Con 100 vw, la visualizzazione occupa il 100% della larghezza dello schermo. Per impostazione predefinita, i margini e le dimensioni del widget sono impostati in percentuale.
• Altezza riquadro visualizzazione (vh). La percentuale dell'altezza di un elemento quando viene visualizzato su un determinato schermo. 10 vh equivale all'altezza del riquadro di visualizzazione su qualsiasi dimensione dello schermo.
• A. Le dimensioni sono determinate automaticamente dal contenuto.
• Min e Max. La misura più piccola e più grande di un elemento. Questa impostazione fa sì che un elemento non superi le dimensioni impostate durante il ridimensionamento.

Allineamento

Organizza

È possibile riordinare gli oggetti sovrapposti sia dal pannello Design che dal pannello Livelli, semplicemente trascinando l'oggetto sopra o sotto.

Autoallineamento vs. allineamento delle flexbox

Le flexbox sono munite di due tipi di allineamento automatico nel pannello Design.

• Alla voce "Layout", seleziona il layout Verticale o Orizzontale per impostare un asse per gli elementi che si trovano all'interno della flexbox.
• Alla voce "Allinea nella Flexbox", seleziona come gli elementi verranno disposti nell'asse selezionato.
  
• In "Allinea", seleziona in che modo l'intera flexbox verrà allineata rispetto alla griglia. È possibile allineare solo sotto l'asse opposto.
  
• In "Allinea", selezionare la posizione in cui un elemento all'interno di una flexbox (ad esempio, un pulsante) è allineato sull'asse del layout automatico scelto.
  

PIN

Nel pannello Design, è possibile fissare gli elementi in una data posizione all'interno di una cella, in modo che tale posizione rimanga invariata al variare delle dimensioni della cella stessa.

Per fissare un elemento in una data posizione all'interno di una cella:

1. Seleziona l'elemento, e nel pannello "Design", scorri fino a Posizione.
2. Accanto a "Fissa", fai clic sulla freccia corrispondente al punto in cui desideri fissare l'elemento nella cella.
   

L'elemento rimane fissato in questo posizione della cella anche quando le dimensioni della griglia cambiano.

Breakpoint

Un "breakpoint" è la misura raggiunta la quale il design si adatta a una specifica larghezza dello schermo. I breakpoint consentono alle schermate di essere responsive, sia quando le loro dimensioni aumentano che quando diminuiscono. In Flex, i breakpoint predefiniti sono:

• Desktop (1025px-1399px)

• Wide desktop (1400px e superiore)

• Tablet (768px-1024px)

• Mobile (767px e inferiore)

• Mobile landscape (468px-767px)

È possibile passare da un breakpoint all'altro nella parte superiore della pagina facendo clic sulle diverse viste.

È anche possibile nascondere determinati elementi in specifici breakpoint. Per ulteriori informazioni sui breakpoint, vai alla sezione Breakpoint di Flex (1.0).